使用 WebpackDevServer 實現請求轉發

前后端聯調時服務器是不同的，在開發過程中前端使用的是后端開發測試的服務器，在真正上線后使用的是線上的服務器，很明顯這兩個服務器的地址是不同的。

這樣的話就會有一個問題，如果向服務端請求數據時使用絕對路徑，那么在由開發轉到線上時就要去更改使用絕對路徑的代碼，這樣是很不方便的。那么我們可不可以使用相對路徑，然后通過一個代理來實現使用相對路徑訪問的是我們想訪問的服務器呢，答案是肯定的。使用 WebpackDevServer 實現請求轉發就可以做到。

實現流程：

1. 配置 dev-server

   // webpack.config.js
   devServer: {
     ...
     proxy: {
       '/react/api': 'http://www.dell-lee.com'
     }
   }
   

   經過上面的配置之后，當在 axios 中請求 /react/api 時就相當於請求的是 http://www.dell-lee.com 這台服務器。

2. index.js 中請求數據

   import axios from 'axios';
   
   axios.get('/react/api/header.json')
     .then((res) => {
     	console.log(res);
   });
   

我們實際要訪問的絕對路徑是 http://www.dell-lee.com/react/api/header.json ，經過上面的配置之后，遇到 /react/api 時就會去請求 http://www.dell-lee.com 這台服務器，因此實際訪問的地址就是 http://www.dell-lee.com/react/api/header.json 。

現在有一個問題是如果后端告訴你目前 header.json 暫時不能用，你先用 demo.json 吧，由於header.json 是前后端商量好后在線上時要使用的接口，所以一般不要更改這里的 header.json，可以通過下面的配置來實現路徑的重寫，只需這樣配置 WebpackDevServer :

// webpack.config.js

proxy: {
  '/react/api': {
    target: 'http://www.dell-lee.com',
      pathRewrite: {
        'header.json': 'demo.json'
      }
  },
}

這樣在請求 header.json 時實際上請求的是 demo.json。

注意：

這里配置的 proxy 是 WebpackDevServer 中的，只有在開發環境下才會去使用 WebpackDevServer，是為了方便開發。

真正到了線上，請求 /react/api/header.json 就是去請求線上服務器的 /react/api/header.json。

在之前開發不使用 webpack 作為打包工具的時候還需要使用 charles 類似的工具，使用 webpack 之后完全可以替代這些軟件，而且功能也很強大。

完，如有不恰當指出，歡迎指正哦。