无数的人学习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好处多多。
网友评论