vue项目中Webpack-dev-server的proxy用法
阅读原文时间:2023年07月08日阅读:1

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

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

1. 请求/api/XXX现在都会代理到请求http://www.baidu.com/api/XXX,例如/api/login代理到请求http://www.baidu.com/api/login

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

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

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

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

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

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

module.exports = {
    //...
    devServer: {
        proxy: {
            '/api': {
                target: 'https://www.baidu.com',
                secure: false,
                changeOrigin: true,
            }
        }
    }
};
  • changeOrigin参数, 是一个布尔值, 设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求