一直以来没弄懂使用vue3.0proxyvue2.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

 

 

 

 

 

Logo

前往低代码交流专区

更多推荐