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

哈,原来是这么回事,为什么不搞成严格匹配呢,有点小坑,命名什么要多注意吧。

还想到一个问题是:如上所示,只是target匹配错了,如果不用参数什么的,那只是返回的数据不对而已,为什么还会失败?返回404呢。

嗯,这是因为我项目的接口一个是get方式的,一个是post方式的,所以返回404

所以当请求正常返回的数据却不是期望的时候,也可以考虑是这个问题。