关于前端代理的配置问题

原创 yehaikuo111 教程 node 88阅读 2019-03-08 16:00:10 举报

相信用过vue-cli的同学在webpack里面都有设置过代理相关的配置,下面来说说如何在测试、本地、线上用同一个配置而不用去改动不同环境下的请求代码或者配置代码。

举个例子:你生产环境要请求的地址为www.baidi.com:8080/aa/bb

你在开发时,proxyTable的配置应该为:
注意:下面的aa不是随便起的名字,必须为aa

'/aa': {
target: 'www.baidi.com:8080/aa',
changeOrigin: true,
pathRewrite: {
'^/aa': ''
}

项目中请求的地址应该为 axios.get('/aa/bb'),代理解析时会在aa前面加上"www.baidi.com:8080/aa"变成了"www.baidi.com:8080/aa/aa/bb",

但是由于配置中的pathRewrite把aa(第二个aa)改为空字符串,所以请求地址变为"www.baidi.com:8080/aa/bb",

在项目打包上线时,代码里的请求地址不需要改动,下面我来说为什么,

线上代码运行时,碰到axios.get('/aa/bb')请求,因为在aa的前面有个"/",表示根目录的意思,

所以"/aa/bb"会被解析为hostname+port+"aa/bb",所以请求地址就为"www.baidi.com:8080/aa/bb",没有一点毛病,不知道你看明白了没

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复