vue-cli 3.0项目配置代理与路径匹配问题

vue-cli 3.0 代理配置

关于vue-cli 3.0如何配置代理，参考：

https://www.cnblogs.com/zuoan-oopp/p/9101240.html
https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/config.md
https://www.jb51.net/article/130509.htm

举个栗子，在根目录下新建一个vue.config.js文件，写入以下配置：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://www.baidu.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            },
        },
    },
}

这样对'/api'路径的请求就可以转发到target对应的网站了。当然别忘了修改了配置后要重启服务。

遇到的问题

今天遇到一个问题，后来我添加一个新的路径，如下：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://www.baidu.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            },
            '/api2': {
                target: 'http://www.hao123.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/api2': '/'
                }
            },
        },
    },
}

发现'/api'可以正常请求，'/api2'代理不到，返回404，接口是没有问题的。我把'/api'去掉后才可以正常运行。这是怎么回事？
可能是路由在匹配的时候匹配错了。

于是我把'/api2'放到'/api'的前面，可以正常运行。难道是'/api2'给匹配到了'/api'？

module.exports = {
    devServer: {
        proxy: {
            '/api2': {
                target: 'http://www.hao123.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/api2': '/'
                }
            },
            '/api': {
                target: 'http://www.baidu.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            },
        },
    },
}

原来是这样：
路由的匹配是包含就可以的了，而且是proxy的路径去匹配url路径。用伪代码来说就是：
url.includes(proxy)

把'/api'放到'/api2'前面时，先匹配的是'/api'，则上面伪代码就是'/api2'.includes('/api')，返回true，匹配成功！所以对'/api2'的请求都被转到'/api'的target，那当然是出错啊，返回404。

为了进一步验证我的猜想，我将'/api2'直接改为 '/a'：

module.exports = {
    devServer: {
        proxy: {
            '/a': {
                target: 'http://www.hao123.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/api2': '/'
                }
            },
            '/api': {
                target: 'http://www.baidu.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            },
        },
    },
}

结果是'/api2'还可以正常运行的，而反而'/api'请求失败了，返回404。因为'/api'.includes('/a')为true，对'/api'的请求都被转到'/a'的target。