vue项目中Webpack-dev-server的proxy用法

Posted 2021-06-08 shellon

问题：在VUE项目中，需要请求后台接口获取数据，这时往往会出现跨域问题

解决方法：在vue.config.js中devServer配置proxy

常用的场景

1. 请求/api/XXX现在都会代理到请求http://rcpj.iguopin.com/api/XXX，例如/api/login代理到请求http://rcpj.iguopin.com/api/login

module.exports = {
    //...
    devServer: {
        proxy: {
            \'/api\': {
                target: \'http://rcpj.iguopin.com\',
                changeOrigin: true,
            }
        }
    }
};

2. 多个路径需要代理到同一个target下，你可以使用由一个或多个「具有 context 属性的对象」构成的数组：

module.exports = {
    //...
    devServer: {
        proxy: [{
            context: [\'/auth\', \'/api\'],
            target: \'http://rcpj.iguopin.com\',
            changeOrigin: true,
        }]
    }
};

3. 请求路径中不用传递/api，需要重写路径，例如/api/login代理到请求http://rcpj.iguopin.com/login

module.exports = {
    //...
    devServer: {
        proxy: {
            \'/api\': {
                target: \'http://rcpj.iguopin.com\',
                pathRewrite: {\'^/api\' : \'\'},
                changeOrigin: true,
            }
        }
    }
};

4. 需要代理到https下，默认是不接受运行在https上，且使用了无效证书的后端服务器，这时需要设置secure:false

module.exports = {
    //...
    devServer: {
        proxy: {
            \'/api\': {
                target: \'https://rcpj.iguopin.com\',
                secure: false,
                changeOrigin: true,
            }
        }
    }
};

解决跨域原理

• changeOrigin参数, 是一个布尔值, 设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求