接口轉發篇

webpack 轉發

我們在開發階段經常會用到 webpack-dev-server 來啓動本地服務，其實就是起了一個 node 中的 express 服務。當我們在與後端的聯調階段，有兩種方式

後端把代碼部署到測試環境，然後我們直接聯測試環境開始調

使用 devServer 中的 proxy 去轉發到後端，我們需要在所有的接口前加一個級 /api（這個自己定），然後在轉發的時候把這個 /api 在去掉

proxy: {
    '/api': {
      target: '192.168.99.216:8081',
      pathRewrite: { '/api': '' }
    }
}

nginx 轉發

前後端分離開發、部署

nginx 轉發也是同一個道理，匹配 /api 並轉發到後臺

nginx 中具體配置是這個樣子

server {
  location / {
      proxy_pass http://xxxx:8888/;  // 將靜態文件請求轉發到前端服務器
  }
  location /api {
      proxy_pass http://xxxx:9999/;  // 將接口請求轉發到後端服務器，並且去掉 /api
  }
}

頁面上自定義 nginx 的轉發地址

場景：多個任務並行，但是前端的工作量比較少，後端多。所以前端的活兒你一個人幹，後端一個任務一個人。然後就會出現這種情況：

你很快把活兒給幹完了，然後部署到了測試環境。但是後端還在開發啊，當你在專注着擼代碼的時候，他們經常會過來找到你，要求你本地啓動，並且聯他們本地的 ip 來聯調，你經常被打斷，工作效率特別低，你不勝其煩。

於是你就想有沒有一個環境，讓後端自己可以配置接口的訪問地址呢？

有啊！測試環境不就是現成的嗎？我們只要讓測試環境的 nginx 服務器把接口轉發到後端本地的 ip 地址不就行了嗎？

那麼 nginx 怎麼知道這條請求應該被到哪裏呢？我們需要給它一個標誌，在 http 報文頭部增加一個字段，專門用於 nginx 轉發到自定義的地址，例如：

這個 ip 地址和端口肯定不能代碼裏寫死，得在頁面上讓後端自己去配置。可以在頁面上做一個彈窗，只在測試環境下才有按鈕可以讓它彈出

然後在發出 ajax 請求前，把這個 ip:port 設置到 http request header 裏，這樣 nginx 在接收到帶有這個自定義的頭時，就知道該轉發到哪裏了。

nginx 配置如下

location /api {
    if ($http_x_api_target) {   // x_api_target 就是我們自定義的頭字段
        proxy_pass      http://$http_x_api_target/$1;   // 這是頁面上設置的後端本地的地址
    } else {
        proxy_pass   http://172.31.3.234:8080/; // 這是測試環境的服務端地址
    }
}