在日常开发中有很多解决跨域问题的办法，最常用的就是使用Proxy代理这种方式了，因为是本地开发配置起来十分方便。
今天呢就遇到一个非常不起眼的小坑，这里记录一下！
在我的vue.config.js内有以下配置：

module.exports = {
  publicPath: './',
  devServer: {
    proxy: {
      '/api': {
        target: 'http://10.10.18.21:7700',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/api/unified-stats': {
        target: 'http://10.1.13.41:8080/unified-stats',
        changeOrigin: true,
        pathRewrite: {
          '^/api/unified-stats': ''
        }
      },
    }
  }
}

不难看出来我是将 /api 和 /api/unified-stats 代理到不同的服务地址（ps:先不要纠结为什么会有这么怪（重）异（复）的前缀api，哈哈哈）；
可是我通过浏览器发送/api/unified-stats前缀的请求，接口却始终返回404。
其实这里问题就出在了第一个/api的配置上，代理没有按预期工作的原因就是代理匹配的顺序和规则导致的。
当我在尝试访问 /api/unified-stats 时，由于 /api 规则更通用且首先定义，它匹配了请求的 URL，因此 Vue CLI 使用这个规则来处理代理。即使 /api/unified-stats 规则也看似匹配，但由于匹配规则的顺序问题，它不会被使用。
最后调换一下顺序，修改成：

module.exports = {
  publicPath: './',
  devServer: {
    proxy: {
    '/api/unified-stats': {
        target: 'http://10.1.13.41:8080/unified-stats',
        changeOrigin: true,
        pathRewrite: {
          '^/api/unified-stats': ''
        }
      },
      '/api': {
        target: 'http://10.10.18.21:7700',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

这样就可以匹配成功了！
小坑，就此记录一下！