node-http-proxy是一個用于Node.js的HTTP可編程代理庫,支持 websockets,它是適用于實現例如代理服務器和負載均衡這樣的組件,下面來看看小編整理的node HTTP代理模塊(HTTP Proxy)使用介紹.

關于http-proxy

使用npm構建前端項目的話應該很熟悉http-proxy這個模塊了,它能轉發所有請求代理到真實的后端真實API地址,才能讓我們真正實現前后端開發完全分離,甚至部分資源也能代理到相應資源.

如果用過VPN的童鞋就更容易理解了,有時候要看點朝內看不到的內容就得先把請求發到朝外某轉發器上,然后那臺轉發器再請求真實的服務器服務器地址,服務器返回到轉發服務器,轉發服務器再返回客戶機上.

http-proxy的使用非常簡單,https://www.npmjs.com/package/http-proxy 詳細用法看這里,起因因為一個小問題,因為遇到了一個小問題,折騰了半天最后搞定后才發現http-proxy玩玩全全就是傻瓜式的轉發,后來發現這樣設計也挺好.

我當時的開發環境為本地靜態開發localhost:3000,Server:假設為 m.survivalescaperooms.com,然后我的設置如下:

1. httpProxy.createProxyServer({ 
2.   target: 'http://m.survivalescaperooms.com' 
3. }); 
4.  
5. function proxyMiddleware(req, res, next) { 
6.   if (///api//.*$/.test(req.url)) { 
7.     proxy.web(req, res); 
8.   } else { 
9.     next(); 
10.   } 
11. } 

所有的API都請求都走proxy了,但返回的不對,都是404,服務器上tail webserver access.log 居然沒有捕獲到,這讓我感覺很詭異,REST Api調試工具里訪問真實的Server API確沒問題.

發現問題所在,最后我監聽服務器所有http請求,居然發現了一個問題,請求過來的host 為 localhost,發現問題了,但是奇怪了,為什么host都是localhost呢?

我認為可能跟我的本地開發localhost:3000有關,于是我改成這樣,系統HOST 文件添加:127.0.0.1 m.survivalescaperooms.com.

修改http-proxy配置:

1. httpProxy.createProxyServer({ 
2.   target: 'http://192.168.1.85'  // 服務器IP 
3. }); 

然后打開瀏覽器,使用m.survivalescaperooms.com:3000域名來訪問本地前端項目,重新測試api代理,成功了,這回服務器上抓到的head里host都是m.survivalescaperooms.com。

解決問題:

找到問題了,但總感覺這樣不太友好,于是我把系統host文件的:

127.0.0.1 m.survivalescaperooms.com

刪除了,恢復m.survivalescaperooms.com的真實訪問,然后在http-proxy中改成這樣:

1. httpProxy.createProxyServer({ 
2.   target: 'http://192.168.1.85'  // 服務器IP 
3. }); 
4.  
5. function proxyMiddleware(req, res, next) { 
6.   if (///api//.*$/.test(req.url)) { 
7.    proxy.headers.host = 'm.survivalescaperooms.com';  // 這里修改代理請求服務器的host名稱 
8.     proxy.web(req, res); 
9.   } else { 
10.     next(); 
11.   } 
12. } 

最后重啟本地前端項目,loalhost:3000/api/xxxx請求服務器資源,代理到服務器后所有host都不是localhost而是在http-proxy配置中的m.survivalescaperooms.com了.

當然,有些童鞋的server上沒有配置虛擬主機,ip/域名訪問都是同一個程序的話,就不會存在以上問題.