亲宝软件园·资讯

展开

vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决

cc_King 人气:0

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': { 
      ...
      }
 }

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',   //重写请求路径
 }

changeOrigin

假设,如果你的前端服务器是 http://localhost:3000,后端是 http://localhost:8082。

那么后端通过 request.getHeader(“Host”) 获取依旧是 http://localhost:3000。

如果你设置了 changeOrigin: true,那么后端通过 request.getHeader(“Host”) 获取才是 http://localhost:8082。代理服务器此时会根据请求的 target 地址修改 Host。

总结

加载全部内容

相关教程
猜你喜欢
用户评论