vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决
cc_King 人气:0proxy 配置确认、解析
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。
总结
加载全部内容