webpack配置中的跨域(ProxyTable)

今天咱們就來聊聊前端工程中跨域請求數據交互的問題，在之前的項目中，咱們多是經過後端配置用同源策略或是用 jsonp 的形式 去處理先後臺數據交互的問題，在工程化項目中，咱們用的是用代理的形式處理的。

ProxyTable

proxyTable 屬性是用來配置跨域請求接口的，拿 vue-cli 舉例，咱們要在項目目錄中找到根目錄下 config 文件夾下的 index.js。由於咱們在開發環境中調試，因此選擇在 Dev 裏面配置，相似以下：

// 開發配置
    dev: {
        assetsRoot: path.resolve(__dirname, "../dist"),
        // 靜態資源文件夾
        assetsSubDirectory: "static",
        // 發佈路徑
        assetsPublicPath: "/",
        // Various Dev Server settings
        host: "localhost",
        // dev-server監聽的端口
        port: 8080,
        autoOpenBrowser: true,
        proxyTable: {
            //綜合收件
            '/api': {
                target: "http://www.baidu.com", //開發環境
                changeOrigin: true,
                pathRewrite: {
                    '^/api': 'api'
                }
            },
        }
        //是否使用 cssSourceMap
        cssSourceMap: false
    }
複製代碼

上面這段代碼的效果就是將本地8080端口的一個請求代理到了 www.baidu.com 這個域名下：

'http://localhost:8080/api' => 'http://www.baidu.com'
複製代碼

ProxyTable 的原理

dev-server 使用了很是強大的 http-proxy-middleware 包，更多功能，請查看 官網文檔 。