脚本宝典收集整理的这篇文章主要介绍了vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
devServer: { https: true, // 开启https模式 // 配置服务器代理 PRoxy: { '/api': { // 匹配访问路径中含有 '/api' 的路径 target: 'http://localhost:3000/', // 测试地址、目标地址 changeOrigin: true, ws: true, // 是否开启 webSocket 代理 pathrewrITe: { // 请求路径重写 '^/api': '', //重写请求路径 }, } } },
百度最多的解释
这个原因得注意一下
比如说我之前的全局 http.js 配置文件是这样写的
const http = axios.create({ baseURL: 'http://localhost:3000/', })
所以不论是 生产 还是 开发 环境下,我的请求都会发送给我们配置的baseURL,而不会走我们的代理!!!。
所以我们得修改一下配置,使我们的生产路径在生产环境下才生效
let baseURL = "/"; if (process.env.NODE_ENV === 'production') { baseURL = 'http://localhost:3000/'; } const http = axios.create({ baseURL, })
这样在开发环境下,我们的 baseURL = "/"
, 代理就可以生效了。
请求路径必须带有标识!!!
proxy: { '/api': { ... } }
/api
,使用 pathRewrite
解决pathRewrite: { // 请求路径重写 '^/api': '', //重写请求路径 },
pathRewrite的key值 ^/api
就是一个正则表达式。
pathRewrite的value值
为替换后的路径。
这里的话就是将匹配成功的地址当做一个字符串,然后执行 js 的 replace
方法,将执行成功的最终结果作为最后的请求路径。
而 axios.get("/ee/ff/dd")
这个请求就不会进行代理,因为匹配不上我们预设的规则 (请求路径没有 /api
)
最终的请求路径变成了 http://localhost:3000/ee/ff/dd
, 和原路径一致;
又比如说我们的配置为
pathRewrite: { // 请求路径重写 '^/api': '/rewrite', //重写请求路径 }
假设,如果你的前端服务器是 http://localhost:3000,后端是 http://localhost:8082。
那么后端通过 request.getHeader(“Host”) 获取依旧是 http://localhost:3000。
如果你设置了 changeOrigin: true,那么后端通过 request.getHeader(“Host”) 获取才是 http://localhost:8082。代理服务器此时会根据请求的 target 地址修改 Host。
到此这篇关于vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决的文章就介绍到这了,更多相关vue.config.js中devServer.proxy配置说明内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决全部内容,希望文章能够帮你解决vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。