vue3 devserver代理配置（vue.config.js 中 devServer.proxy 配置说明，以及配置正确不生效问题）

proxy 配置确认                  、解析

devServer: { https: true, // 开启https模式 // 配置服务器代理 proxy: { /api: { // 匹配访问路径中含有 /api 的路径 target: http://localhost:3000/, // 测试地址
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  、目标地址 changeOrigin: true, ws: true, // 是否开启 webSocket 代理 pathRewrite: { // 请求路径重写 ^/api: , //重写请求路径 }, } } },

原因 一

百度最多的解释

配置写错了 (解决：复制粘贴上面的实例下去改) 路径没有匹配上 (解决：看本文的详解部分)

原因二

这个原因得注意一下

方式是给我们开发环境用的  
  
  
  
  
  
  
  
  
 ，其次是我们的请求要被开发服务器接收到 
  
  
  
  
  
  
  
  
 ，且不能匹配到请求

 


 


 


 


 


 


 


 


 
，然后我们的请求就会被代理到配置的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 解决

pathRewrite pathRewrite: { // 请求路径重写 ^/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                           。

点赞

















、收藏  
  
  
  
  
  
  
  
  
、投硬币

















，可爱女友不漏气！