devServer.proxy不生效问题解决

devServer.proxy不生效问题解决

1、proxy 配置解析

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

2、不生效原因分析
原因一、配置写错了
原因二、路径没有匹配上
解决方法：按照上述proxy 配置确认、解析仔细检查（建议直接复制）
原因三、在自己封装的http.js中将axios.defaults.baseURL设置为了如下

axios.defaults.baseURL = 'http://localhost:3000'

导致无法匹配.
解决方法：proxy方式是给我们开发环境用的 ，其次是我们的请求要被开发服务器接收到，且不能匹配到请求，然后我们的请求就会被代理到配置的URL。由于写了一个URL,导致代理不会生效。
注释掉，或者改为本地路径。如下

let baseURL = "/";
if (process.env.NODE_ENV === 'production') {
  baseURL = 'http://localhost:3000/';
}
const http = axios.create({
  baseURL,
})

这样在开发环境下我们的 baseURL = “/”, 代理就可以生效了。
3、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；
又比如说我们的配置为

pathRewrite: { // 请求路径重写
    '^/api': '/epui',   //重写请求路径
 }

那么我们的请求 axios.get(“/api/aa/bb/cc”) ;
会执行 “/api/aa/bb/cc”.replace(/^/api/, “/epui”)；
最终的请求路径变成了 http://localhost:3000/epui/aa/bb/cc；
将 /epui 替换了开头的/api。

示例

扩展

vue中proxy代理配置(测试一)
vue中proxy代理配置(测试二)