逐步解决并理解vue-cli中 proxyTable 配置无效,访问404
一开始根据正常情况下设置了proxyTable属性和全局创建axios实例如下。proxyTable: {'/api':{target:'http://xxxx.com',changeOrigin: true,pathRewrite: {'^/api': '/api'}...
·
一开始根据正常情况下设置了proxyTable属性和全局创建axios实例如下。
proxyTable: {
'/api':{
target:'http://xxxx.com',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
}
// 创建axios实例
const service = axios.create({
baseURL: '/api/admin/', // api的base_url
timeout: 5000 // 请求超时时间
})
-------------------------------------------------------------
问题解决:
去除pathRewrite
proxyTable: {
'/api':{
target:'http://xxxx.com',
changeOrigin: true
}
}
/api 是本地路径和后端接口路径的匹配前缀,若后端接口给了/api这个前缀,可用上面的写法。
那么还有一种情况,是后端的接口没有我们想要的匹配项(前缀)’/api’,是直接的http://www.xxx.com/save/post,这样的接口,我们就要用到pathRewrite来重写地址,将本地路径上的带匹配前缀的路径:http://localhost:8080/api/save/post上的前缀’/api’转成 ‘ / '。以下第一种是网络上大部分推荐的,但是我亲测是无效的,估计他们多数用的上面的方法,没有实际使用下面的方法,LZ用以下第一种方法折腾了2天无果,后去看了webpack-dev-server的issue,无意义试通了接口,即下面第二种方法,当然也不排除第一种方法是我的版本问题而没有效果,所以如果大家试了第一种方法有效就当我的方法没说,如果无效,不妨试试我的第二种方法:
第一种方法(网上写的方法)
proxyTable: {
'/api':{
target:'http://xxxx.com',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
第二种方法(亲测有效的方法)
proxyTable: {
'/api/*':{
target:'http://xxxx.com',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
}
即将上面的匹配项从 ‘/api’ 改成了 ‘/api/*’,至于为什么,我表示也没有搞明白,不过确实调通了代理,希望对大家有帮助
附上自己搜到的关于 vue-cli 中 proxyTable 无效的几个排查方向:
- proxTabtle 配置错误,比如:pathRewrite中配置 和自己网络请求中url写法不匹配
- 电脑开着全局代理翻墙(有可能是网页,如chrome,火狐浏览器,也有可能shawdowsocks(开启了全局模式),将其退出)
- 删掉node_modules 目录,重新 npm install 安装
- 重启电脑
proxyTable
的修改会无效,这时候可以尝试修改启动项目的端口,就在proxyTable
属性配置的下面几行有个port: 8080
,改成其他,例如8081
,就会有效,然后再改回来就好(最好再执行下 npm run dev)。- 这个比较多人说了,就是要手动再执行一次
npm run dev
更多推荐
已为社区贡献9条内容
所有评论(0)