小伙伴们,基本都遇到过处理跨域请求,axios 跨域请求设置其实很简单,但是里面有坑!敲黑板了。
说下我在本地环境测试时 proxyTable 排查方案:
注意:
一定要明白代理设置成功后:访问的接口地址依然还是:http://localhost:8080/apis/helloweb/f01...;只是通过内部代理进行了一次转发(了解NG的应该很容易理解)这个 http://localhost:8080 背后可能是 http://192.168.0.0:18000 或其它的地址。
所以这儿一定要注意,代理成没成功,不能看浏览器请求的地址是不是 localhost 变成了你设置的新地址。
下面看配置代码
路径:打开 config 文件夹中的 index.js 文件
module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/apis': { target:'http://helloweb.wang',//请求域名 //secure: false, // 如果是https接口,需要配置这个参数 changeOrigin:true,//如果是跨域访问,需要配置这个参数 pathRewrite:{ '^/apis': '/' } } }, } }
页面调用:
const httpHandler = axios.create({ headers: { "Content-Type": "application/json;charset=utf-8" }, //即将被发送的自定义请求头 withCredentials: true //表示跨域请求时是否需要使用凭证 }); let url = "apis/osg-p0002/member/c10/f04"; httpHandler .post(url) .then(result => { console.log(result); this.data = result; }) .catch(error => { console.error(error); });
排查方案
更改配置文件了,先重启!!!
将浏览器请求的 url 手动改成代理后的真实地址,测试原 url 是否畅通(不要以为一定畅通啊,我就是少了这一步,原来一直少了一段路径,加上cmd没打印代理,所以我一直觉得是代理问题)
手动再执行一次npm run dev
再检查下代理配置,很简单 就配这儿 其他不改
电脑开着全局代理翻墙(有可能是网页,如chrome,火狐浏览器,也有可能shawdowsocks(开启了全局模式),将其退出)
删掉node_modules 目录,重新 npm install 安装
proxyTable
的修改会无效,这时候可以尝试修改启动项目的端口,就在proxyTable
属性配置的下面几行有个port: 8080
,改成其他,例如8081
,就会有效,然后再改回来就好(最好再执行下 npm run dev)。
原文链接:HelloWeb前端网 » vue-cli中proxyTable配置无效问题解决方法 » 感谢您的浏览,希望能有所帮助。
欢迎您加入“Helloweb” 学习交流群:
196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!