Vue ajax跨域请求

Vue webpack-dev-server实现跨域请求

思路

配置webpack-dev-server，代理某一个路径到目标路径，同是更改源和重写

Vue里定义一个全部变量：site

Vue.prototype.site = '/api/';

此后发送的ajax请求都使用此变量来组合（为了方便管理，当需要更改时直接更改次变量）

设置webpack的代理和重写

在 config/index.js里修改dev选项

 dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api':{
        target:'http://xxxx.com/api',
        changeOrigin:true,
        pathRewrite:{
            '^/api':''
        }
      }
    },

主要看proxyTable选项：

/api 是要代理的目录，target 是目标URL，即后台接口的真正位置

changeOrigin 为是否修改源，当时用ajax且跨域测试时需为true

pathRewrite 为路由重定向

工作流程：

当检测到有URL请求且是/api 路径时就修改请求URL，把请求URL中的/api 替换为target里的值，同时改变源让浏览器认为不是跨域请求

example: 我发送一个ajax请求，路径为 /api/test.php ，那修改后真实请求的url就是 http://xxxx.com/api/test.php

注意 因为部署到服务器上时不再使用webpack，所以你需要修改ajax请求的url，当你使用之前说的全局变量时只需要修改下全局变量就好

，更好的实践是根据部署代码的位置和后台api的未知来设置需要代理的路径

假如部署的前端代码index.html在根目录下，后台api在/test/下，那么把代理路径设置为/test更胜一筹