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

問題：在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, 本地就會虛擬一個服務器接收你的請求並代你發送該請求