位置: IT常识 - 正文
vue.config.js 中 devServer.proxy 配置说明，以及配置正确不生效问题
发布时间：2024-01-08推荐整理分享vue.config.js 中 devServer.proxy 配置说明，以及配置正确不生效问题，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
百度最多的解释
配置写错了 (解决：复制粘贴上面的实例下去改)路径没有匹配上 (解决：看本文的详解部分)原因二这个原因得注意一下
方式是给我们开发环境用的 ，其次是我们的请求要被开发服务器接收到，且不能匹配到请求，然后我们的请求就会被代理到配置的URL。注释掉，或者改为本地路径，否则代理不会生效比如说我之前的全局 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 = "/", 代理就可以生效了。
注意还有一点就是，即使我们的代理生效了，但是在浏览器请求头中展示的也不是配置的代理地址；所以测的时候得多问问后端请求过去没有，或者自己node搭个简易的服务器看看成没成功；不要一根筋的死盯浏览器的请求头地址。详解请求路径必须带有标识！！！proxy: { '/api': { ... } }用代理首先你得有一个标识，表明你的这个连接要使用代理;
不然的话 html css js 这些静态资源都跑去代理。
/api 就是告诉 node ,我接口用 /api 开头的才使用代理，所以接口都写成 /api/xx/xx
出现问题： 请求路径没有 /api ，使用 pathRewrite 解决
pathRewritepathRewrite: { // 请求路径重写 '^/api': '', //重写请求路径 },pathRewrite的key值 ^/api 就是一个正则表达式。
pathRewrite的value值 为替换后的路径。
这里的话就是将匹配成功的地址当做一个字符串，然后执行 js 的 replace 方法，将执行成功的最终结果作为最后的请求路径。
比如：我们有一个请求 axios.get("/api/aa/bb/cc") ;根据我们这里配置的 proxy， 带有 /api 的请求路径就需要进行代理，且 /api/aa/bb/cc 路径中含有 /api ，所以该请求就需要代理。将路径当做字符串执行， "/api/aa/bb/cc".replace(/^\/api/, "")执行结果： /aa/bb/cc最终的请求路径变成了 http://localhost:3000/aa/bb/cc 不含/api；而 axios.get("/ee/ff/dd") 这个请求就不会进行代理，因为匹配不上我们预设的规则 （请求路径没有 /api）最终的请求路径变成了 http://localhost:3000/ee/ff/dd, 和原路径一致；又比如说我们的配置为pathRewrite: { // 请求路径重写 '^/api': '/rewrite', //重写请求路径 }那么我们的请求 axios.get("/api/aa/bb/cc") ;会执行 "/api/aa/bb/cc".replace(/^\/api/, "/rewrite")；最终的请求路径变成了 http:/rewrite/localhost:3000//aa/bb/cc；将 /rewrite 替换了开头的/api。changeOrigin假设，如果你的前端服务器是 http://localhost:3000，后端是 http://localhost:8082。
那么后端通过 request.getHeader(“Host”) 获取依旧是 http://localhost:3000。
如果你设置了 changeOrigin: true，那么后端通过 request.getHeader(“Host”) 获取才是 http://localhost:8082。代理服务器此时会根据请求的 target 地址修改 Host。
点赞、收藏、投硬币，可爱女友不漏气！
上一篇：雷尼尔山透镜状云的延时视频，华盛顿 (© Delrious/Shutterstock)(雷尼尔山位于美国西北部)
下一篇：将yolov5中的PANet层改为BiFPN(yolov5输出result)
