Webpack-dev-server的proxy用法

前言：

devServer:{
        contentBase:'./',
        proxy:{
            // 當你請求是以/api開頭的時候，則我幫你代理訪問到http://localhost:3000
            // 例如：
            // /api/users  http://localhost:3000/api/users
            // 咱們真是服務器接口是沒有/api的 
            "/api":{
                target:"http://localhost:3000",
                pathRewrite:{"^/api":""}
            }
        }
    }

　　用代理, 首先你得有一個標識, 告訴他你這個鏈接要用代理. 否則的話, 可能你的 html, css, js這些靜態資源都跑去代理. 因此咱們只要接口用代理, 靜態文件用本地./api’: {}, 就是告訴node, 我接口只要是’/api’開頭的才用代理.因此你的接口就要這麼寫 /api/xx/xx. 最後代理的路徑就是 http://xxx.xx.com/api/xx/xx.但是不對啊, 我正確的接口路徑裏面沒有/api啊. 因此就須要 pathRewrite,用」^/api」:」, 把’/api’去掉, 這樣既能有正確標識, 又能在請求接口的時候去掉api.

 

做用：

　　一、解決開發環境的跨域問題(不用在去配置nginx和host)

　　二、若是你有單獨的後端開發服務器 API，而且但願在同域名下發送 API 請求 ，那麼代理某些 URL 會頗有用。　　　　

用法：

　　一、請求到 /api/xxx 如今會被代理到請求 http://localhost:3000/api/xxx, 例如 /api/user 如今會被代理到請求 http://localhost:3000/api/user

mmodule.exports = {
    //...
    devServer: {
        proxy: {
            '/api': 'http://localhost:3000'
        }
    }
};

　　二、若是你想要代碼多個路徑代理到同一個target下, 你可使用由一個或多個「具備 context 屬性的對象」構成的數組：

module.exports = {
    //...
    devServer: {
        proxy: [{
            context: ['/auth', '/api'],
            target: 'http://localhost:3000',
        }]
    }
};

　　三、若是你不想始終傳遞 /api ，則須要重寫路徑：

module.exports = {
    //...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                pathRewrite: {'^/api' : ''}
            }
        }
    }
};

　　請求到 /api/xxx 如今會被代理到請求 http://localhost:3000/xxx, 例如 /api/user 如今會被代理到請求 http://localhost:3000/user

　　四、默認狀況下，不接受運行在 HTTPS 上，且使用了無效證書的後端服務器。若是你想要接受，只要設置 secure: false 就行。修改配置以下：

module.exports = {
    //...
    devServer: {
        proxy: {
            '/api': {
                target: 'https://other-server.example.com',
                secure: false
            }
        }
    }
};

　　五、有時你不想代理全部的請求。能夠基於一個函數的返回值繞過代理。在函數中你能夠訪問請求體、響應體和代理選項。必須返回 false 或路徑，來跳過代理請求。例如：對於瀏覽器請求，你想要提供一個 HTML 頁面，可是對於 API 請求則保持代理。你能夠這樣作：

module.exports = {
  //...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                bypass: function(req, res, proxyOptions) {
                    if (req.headers.accept.indexOf('html') !== -1) {
                        console.log('Skipping proxy for browser request.');
                        return '/index.html';
                    }
                }
            }
        }
    }   
};

 

 

解決跨域原理

 

　　上面的參數列表中有一個changeOrigin參數, 是一個布爾值, 設置爲true, 本地就會虛擬一個服務器接收你的請求並代你發送該請求

module.exports = {
    //...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true,
            }
        }
    }
};