Vue-cli解决开发环境的跨域问题
对于前端开发人员来讲，当你在开发环境中与后台开发人员进行数据联调时，总会遇到烦人的跨域问题！
解决跨域的方法有很多种，比如你和后台人员经过友好协商后，你可以通过JSONP的方式或者让后台人员将代码设置为允许你进行跨域！但是往往前后台开发人员的配合默契度是不太高的。如果后台只给你接口，并明确告诉你不允许修改接口，怎么办？怎么办才能实现跨域？此时你就可以通过proxyTable来解决跨域问题！ 通过proxyTable解决跨域在Vue-cli当中是很简单的。只需修改config文件夹下的index.js中的proxyTable就能实现：
//代理配置表，在这里可以配置特定的请求代理到对应的API接口
proxyTable:{
"/api":{
target:"http://www.zhangpeiyue.com",//访问的服务器地址
changeOrigin:true,//true为开启代理
//secure: true, // 如果是https接口，需要配置这个参数
pathRewrite:{
'^/api': '/'//路径的替换规则
/*
*这里的配置是正则表达式，以/api开头的路径将会被‘/'替换掉
*假如后台文档的接口是 "http://www.zhangpeiyue.com/user/add"
*前端调取API接口应写：axios.get('/api/user/add')
*/
}
}
}以上代码的“/api"你可以认为用于代替target里面的地址，调取接口的地址直接用api来替换。 比如后台接口地址为："http://www.zhangpeiyue.com/user/login"。 你可以直接写为："/api/user/login"即可。 当然，你也可以根据不同的API域名所负责的模块不同来进行多项配置：
//代理配置表，在这里可以配置特定的请求代理到对应的API接口
proxyTable:{
"/adv":{
target:"http://adv.zhangpeiyue.com",//访问的服务器地址
changeOrigin:true,//true为开启代理
pathRewrite:{
'^/adv': '/'//路径的替换规则
}
}，
"/user":{
target:"http://user.zhangpeiyue.com",//访问的服务器地址
changeOrigin:true,//true为开启代理
pathRewrite:{
'^/user': '/'//路径的替换规则
}
}
}以上代码"/adv"与"/user"分别负责项目中的广告模块与用户模块。 例如： 接口地址：“http://adv.zhangpeiyue.com/add”， 前端调取API接口应写：axios.get('/adv/add')
注意：
配置修改完以后一定要重新npm run dev 一次
补充：
changeOrigin的属性值为一个布尔值，如果设置为true，那么本地会虚拟一个NODE服务端接收你的请求并代你发送该请求(中间件)。因为服务端语言是没有跨域问题的，所以这样最终就解决了跨域问题了。不过这只适用于开发环境，上线后可以使用反向代理nginx。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2018-05-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
