vuecli3里配置vue.config.js的代理时出现代理不正确

问题

最近遇到一个非常低级的问题，一个 post 请求接口报 404，但是排查起来却排查了好久，postman 以及 Swagger 不通过代理去请求的时候是没有问题的，然后通过自己的项目去访问就报错 404，然而这个包的其他接口又可以。突然直接就懵逼了。

具体情况

​​/ApiBase​​​这个包部署在 9090 的环境，我本地的项目是在 8080 然后，我在项目中用 axios 去访问一个 post 接口 ​​http://127.0.0.1:8080/ApiBase/commonUtils/updateConfig​​​，就报 404，然而​​http://127.0.0.1:9090/ApiBase/commonUtils/updateConfig​​是可以的，postman 以及 Swagger 测试都ok。

// 请求代理
devServer: {
  proxy: {
    '/ApiBase': {
      target: 'http://127.0.0.1:9090',
      ws: true,
      changeOrigin: true
    },
    '/common': {
      target: 'http://127.0.0.1:7001',
      ws: true,
      changeOrigin: true
    },
  }
}

排查过程

经过了很长时间的挣扎，在后端大佬的协助下，通过 postman 调用 ​​http://127.0.0.1:8080/ApiBase/commonUtils/updateConfig​​​，在去掉参数，然后调用接口，结果出来时发现 ​​http://127.0.0.1:8080/ApiBase/commonUtils/updateConfig​​​ 指向了 ​​http://127.0.0.1:7001​​，简直了，好家伙，我直接好家伙。

由此推测出代理的配置可能出问题了，应该是不严谨导致匹配到 ​​/common​​ 包去了。

在 cli 脚手架文档里可以看到​​http-proxy-middleware​​，里面有更多的配置可以查看

解决

修改配置

// 请求代理
devServer: {
  proxy: {
    '^/ApiBase/': {
      target: 'http://127.0.0.1:9090',
      ws: true,
      changeOrigin: true
    },
    '^/common/': {
      target: 'http://127.0.0.1:7001',
      ws: true,
      changeOrigin: true
    },
  }
}