Nginx，Charles與Webpack配置前端API代理教程(超詳細)

爲何前端須要配置API代理？

咱們在開發一個項目的時候，若是服務採用的是分佈式部署，也就是說按不一樣模塊或功能部署於不一樣的服務器，以下圖

客戶端不一樣的請求會被主服務器轉發到對應的服務器上去，若是在開發階段，也有一個這樣作轉發的服務器，那麼前端的開發是不須要配置代理的，咱們今天要探討的是開發階段無轉發服務器，須要前端配置代理的狀況，以下圖

你們都知道，瀏覽器是存在跨域限制的，處於安全性考慮，服務器ABC不可能設置爲容許任何請求均可以訪問，So, 咱們配置前端API的代理的目的其實就是爲了解決跨域問題，前端按照既定的規則配置好代理以後，就能保證開發階段和線上部署服務的一致。

配置前端API代理的三種方式

本文以配置Dva項目的代理爲示例，由於Dva項目的腳手架自帶Mock功能，省去了本身寫接口的麻煩，同時公司內部項目也採用此技術，能讓團隊人員也作一參考。

示例地址：github.com/ranshaw/fro…

拉取代碼，安裝依賴以後，訪問http://localhost:8000（默認是8000端口，若是被佔用，會在其餘端口），就能看到Welcome to dva的歡迎頁面。項目中.roadhogrc.mock.js爲Mock數據的配置文件，現爲

在瀏覽器中輸入 http://localhost:8000/users/1 就能看到返回的是你在.roadhogrc.mock.js中配置的數據

咱們最終要達成的目的:

1. 使用www.frontproxy.com訪問開發環境，即在瀏覽器輸入www.frontproxy.com等同於輸入localhost:8000。
2. 將users、todos、posts模塊也就是請求路徑中以/users/、/todos/、/posts/開始的請求接口，都代理到不一樣的服務器。
3. 最終實現請求如 www.frontproxy.com/users/1 返回的數據爲請求 jsonplaceholder.typicode.com/users/1 返回的數據

注：本文中將三個模塊的請求都代理到 jsonplaceholder.typicode.com 上；爲了測試方便都採用Get請求，其餘請求方式同Get方式；下文中講述的配置方法以Mac爲例，Windows上原理一致，具體方法需自行google。

配置Nginx和Hosts實現

配置Hosts

在mac終端輸入 sudo vi /etc/hosts，對Hosts文件進行編輯，添加以下配置 127.0.0.1 www.frontendproxy.com

而後保存。若是對Vim命令不瞭解，點擊 Vim命令詳解學習。

如今咱們訪問www.frontproxy.com:8000和訪問localhost:8000的效果是同樣的，

由於Hosts配置的映射關係，不支持自定義端口，因此如今訪問的時候還必需要加上端口，下面咱們會經過Nginx配置，將url中端口去掉。

配置Nginx

安裝好Nginx以後，在Mac終端輸入 cd /usr/local/etc/nginx 找到nginx.conf文件，可以使用軟件打開或者繼續輸入vi nginx.conf 添加以下配置

server {
        listen 80;
        server_name www.frontendproxy.com;
        index index.html;
        location / {
            proxy_pass http://127.0.0.1:8000/;
        }
    }
複製代碼

在終端輸入 sudo nginx，啓動Nginx,此時在瀏覽器輸入 www.frontendproxy.com 就能夠正常顯示了，可是當你修改頁面的內容你會發現，http://localhost:8000 能夠自動刷新，更新你剛纔修改的內容，www.frontendproxy.com 頁面並無自動刷新，手動刷新後修改的內容才顯示出來，而且頁面中有一個報錯

webSocket通訊出了問題，咱們須要添加以下配置

location /sockjs-node/ {
    proxy_pass http://127.0.0.1:8000/sockjs-node/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";	
 }
複製代碼

在終端輸入sudo nginx -s reload 重啓nginx,而後發現報錯消失，修改頁面內容後，能夠自動刷新頁面了。

到這一步，咱們可使用域名訪問本地項目，進行愉快的開發了，可是請求users模塊的數據仍然是Mock中的數據，

咱們在Nginx中添加以下配置，對users模塊的請求進行代理，

location /users/ {
    proxy_pass http://jsonplaceholder.typicode.com/users/;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
複製代碼

在終端輸入sudo nginx -s reload重啓Nginx，再次請求 www.frontendproxy.com/users/1 你會發現返回的數據已經不是Mock配置的數據了，而是 jsonplaceholder.typicode.com/users/1 返回的數據，說明代理已經生效

同理對todos、posts模塊進行配置，完整配置以下

server {
    listen 80;
    server_name www.frontendproxy.com;
    index index.html;
    location / {
        proxy_pass http://127.0.0.1:8000/;
    }
    location /sockjs-node/ {
        proxy_pass http://127.0.0.1:8000/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";	
     }
    location /users/ {
        proxy_pass http://jsonplaceholder.typicode.com/users/;
        proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /todos/ {
        proxy_pass http://jsonplaceholder.typicode.com/todos/;
        proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /posts/ {
        proxy_pass http://jsonplaceholder.typicode.com/posts/;
        proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
複製代碼

OK,咱們如今已經完成了對users、todos、posts模塊請求接口的代理，不一樣模塊對應的服務器的地址，均可以自定義設置。

Charles配置代理

Charles爲Mac上一個超級好用的抓包軟件，特別是對於移動端開發接口的調試，簡直不要太爽，在此不作延伸，後續會專門寫文章介紹,下載地址爲： 連接: pan.baidu.com/s/1UCJu9KaB… 提取碼: shfp。

若是你按照上文教程配置了Hosts和Nginx，請把相關配置都清除掉，而後咱們開始Charles的配置。

Charles並不能直接對Chrome進行抓包，須要對Chrome設置代理， 我這使用的是Chrome的一個插件SwitchyOmega，在SwitchOmega中配置代理，8888爲Charles默認的端口，若是你更改過，請填寫你更改後的端口

配置生效之後查看Chrome瀏覽器中代理的設置，

此時，經過Chrome瀏覽器發出的請求，就會被Charles抓住

如今咱們開始配置Charles的代理規則，以下圖打開Charles中tools中的Map Remote

點擊add按鈕進行添加

如圖將 www.frontendproxy.com 代理到 127.0.0.1：8000上，配置好以後，訪問域名和訪問IP效果是同樣的，若是上文配置好Hosts和Nginx以後的效果，一樣須要配置/sockjs-node/的代理，這樣更改文件後能夠自動保存了，下面添加users模塊的代理

Charles代理規則的優先級是從上到下的，也就是說上面的規則會覆蓋下面的規則，這點須要注意下

OK,到這裏Charles代理前端API請求的配置就已經完成了。

Wepack + Host Switch Plus配置

如今前端開發環境中基本上都有用到webpack,其中webpack-dev-server這個包也是使用webpack搭建開發環境所必備的，咱們經常使用的自動刷新和熱更新功能就是由它提供的，今天所要講的proxy功能也是如此。

Host Switch Plus，顧名思義就是對host的管理工具，它是一個Chrome的插件，須要你在Chrome應用商店下載。

首先咱們先配置對域名的代理，支持單個添加和批量添加

添加完成以後，咱們點擊插件的圖標就能看到你剛纔配置的信息，Enable爲勾選，IP前面的圓點爲綠色表示已生效

此時，訪問 www.frontendproxy.com已經代理到 http://localhost:8000 上，咱們再打開項目中的 .webpackrc 文件，添加以下配置

{
  "proxy": {
  "/sockjs-node/": {
    "target": "http://127.0.0.1:8000/",
    "changeOrigin": true
  },
  "/users/": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true
  },
  "/todos/": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true
  }
}
}
複製代碼

好了，關於webpack配置代理的操做，到這裏也完成了，關於webpack-dev-server中proxy配置的詳細規則，請點擊查看，我這裏再也不一一講述。

注意： 若是你如今使用的是Nginx配置的代理，如今想轉爲webpack配置代理，假如要代理的模塊爲/users/,指望代理的接口地址爲http://localhost:8000/login,Nginx和Webpack的配置分別以下，最終代理服務器發出的請求爲http://jsonplaceholder.typicode.com/login,Webpack的配置項要多加一項配置pathRewrite，對代理服務器的路徑進行重寫，將請求中的/users/替換爲/,有時候後端會須要請求頭中的某些值，這時候就須要添加自定義請求頭（版本webpack-dev-server@3.1.7），以下：

Nginx配置：
 location /users/ {
        proxy_pass http://jsonplaceholder.typicode.com/;
        proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
 Webpack配置：
 {
  "proxy": {
  "/users/": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true，
    "pathRewrite": { "^/users/": "/" }，
    "headers":{
       // 你須要定義的請求頭
       Host: "localhost:8000"
    }
  },
}
}
複製代碼

總結

下面是劃重點時間，咱們從適用範圍、配置難易、團隊協做成本三個方面對比一下這三種配置方式

國慶節的一天就這麼過去了，以爲有幫助的童鞋，幫忙點個👍喲！