配置proxyTable解决开发环境的跨域问题（强势补充，如果你还没解决，请看这里）

无数的人学习vue，都要面临开发跨域的问题。

虽然百度出有解决办法，依然有一半多的童鞋依样画葫芦，还是没搞定。

到底如何理解proxyTable，下面直入正题。

核心：proxyTable配置的代理是把服务器端（另一个域）代理到开发环境的域

核心：proxyTable配置的代理是把服务器端（另一个域）代理到开发环境的域

核心：proxyTable配置的代理是把服务器端（另一个域）代理到开发环境的域

重要的事情，说3遍。是把另一个域代理回本地。

说以，不要理解成我的所有服务器端接口没有api目录。配置里多了个/api路径，不适合我

如果你配置完成，浏览器F12，查看网络，发现ajax请求的URL是localhost:8080/api/……你可能会疑惑，我的api接口怎么变成vue开发的域了了？恭喜你代理已经成功了，如果还没OK，都是一些url的小问题了。

说明：

以下都参照我的环境来举例，我前端开发是localhost:8080，请求的所有api是www.abc.com（我是添加了hosts的，如果你服务端是类似localhost:9527或其它，请自行修改）

1、/config/index.js，别看到路径多了个api就觉得不适合，你就离开了，其实就是要这样

proxyTable: {

  '/api': {

    target:'http://www.abc.com', 

    changeOrigin:true,

    pathRewrite: {

      '^/api':''

    }

  }

},

2、ajax请求的url，真实的服务端url是http://www.abc.com/login，前端请改写成/api/login

this.$http.get('/api/login').then(……)

如果你配置OK，浏览器F12，查看ajax请求的网络，会看到请求信息：

Request URL:  http://localhost:8080/api/login

恭喜你，大功告成了。服务端的http://www.abc.com/login被代理到开发环境下/api了，其实就是要这样。

再次重申，核心：proxyTable配置的代理是把服务器端代理到开发环境的node站点

这样的问题是开发环境和正式环境又如何兼容呢？我的做法是：

把所有异步请求的url都统一放到全局变量的，比如在一个api.js里面

const BaseUrl =  process.env.NODE_ENV=='production'? '':'/api';

//如果是正式环境，其实不需要域名，本身打包发布后就放到主域名下的，所以前缀可以为空字符串。

//如果你都想加上域名，可以自行根据开发的环境变量判断取值，如process.env.NODE_ENV=='production'? process.env.BASE_API:'/api'

//我的这个evn.BASE_API的全局环境变量是在config/dev.env.js配置的，请自行对照配置

global.API_URL= {

'login':              BaseUrl +'/login',

……

使用的时候

this.$http.get(API_URL.login).then(……

其他补充：

1、如果你封装了axios，那么开发模式千万别再加baseURL参数了。

如果要加，也记得先判断环境 process.env.NODE_ENV=='production'?

2、这个方法不需要api接口的后端配置 Access-Control-Allow-Origin: *

意味着，如果是分离开发，你不用麻烦后端童鞋。

总之这个proxyTable好处多多。