vue 跨域proxy路径的正确配法

一直以来没弄懂使用vue3.0的proxy或vue2.0 proxyTable路径的正确配法。每次以为配对了结果一直出错，只有多尝试几次后才正确，直到某一天，终于理解了这到底是什么原理。

不废话，直接上代码，我们要请求的路径为：

http://localhost:3000/api/todos

以vue3.0为例，在项目根目录下新建vue.config.js文件，添加以下代码：

module.exports = {
    devServer: {
        proxy: {
            '/api': //代理标识
                {
                target: 'http://localhost:3000/api', //代理路径
                changeOrigin: true,
                pathRewrite: {
                  // 标识替换
                  // 原请求地址为 /api/todos 将'/api'替换''时，
                  // 代理后的请求地址为： http://localhost:3000/api/todos
                  // 若替换为'/other',则代理后的请求地址http://localhost:3000/api/other/todos 
                    '^/api': ''
                }
            }
        }
    }
}

使用axios请求的代码为：

let url = '/api/todos';
this.$axios.get(url)
.then(response=>{
    console.log(response)
 })
.catch(error=>{
    console.log((error));
});     

整个过程可以概括为以下几步：

1. proxy检查我们的请求的url ： /api/todos有没有代理标识/api，如果有的话，在url前加上代理路径，即整个url为

http://localhost:3000/api/api/todos

2. pathRewrite中的^/api会把代理标识/api替换为空，即整个url变为：

http://localhost:3000/api/todos