vue-cli里有代理设置。
但是!!!怕麻烦的话,啥都别说了。不如试试这个,一劳永逸。
可能是东半球解决跨域问题最简单粗暴的方法:
1.chrome复制快捷方式。
2.右键快捷方式,属性----目标
改为以下(确保这些安装路径都是存在的)
"C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\Users\Administrator\AppData\Local\Google\Chrome\Application
3.优势:甚至可以本地页面调试线上接口。。。
可是这样手机做测试没用呀
关键字 vue proxytable axios
vue2 proxytable无效 是由于axios.defaults.baseURL,如果其为完整地址如http://api.51app.cn 则proxytable无效
最终代码
config/index.js
'/apiProxy': {
target: 'http://api.51app.cn', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apiProxy': '/' //将虚拟的apiProxy去掉
}
}
判断/apiProxy开头的接口做代理
config.js
devHost对应的是axios.defaults.baseURL
const devHost = '//192.168.119.120:9160'
const devHost = '//api.51app.cn/gameapi' ==>const devHost = '/apiProxy/gameapi'
开发时,若需要请求线上接口,则改为/apiProxy/gameapi,即可通过Proxy获取数据
其他前缀的接口 记得页加上/apiProxy
再一个这个代理可能会有缓存,去掉代理的代码后,接口还是能跨域,后来重新install个项目发现还是跨域,可能和容器的缓存有关系
参考资料:
奇怪的bug:解决 vue-cli中 proxyTable 配置无效
优雅的解决vue里面跨域、路由冲突问题
网友评论