在日常开发中有很多解决跨域问题的办法，最常用的就是使用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': ''
}
}
}
}
}
这样就可以匹配成功了！
小坑，就此记录一下！
