nginx搭建前端項目web服務器以及利用反向代理調試遠程后台接口


  前端同學用nginx搭建自己的web服務器,后台程序專門部署在一台服務器上(我們之前公司就有三套環境,開發/測試/生產),這樣做的好處是

  1、前端代碼基本都是靜態文件,重啟一次很快,也就幾秒鍾時間。

  2、不用配置后台語言開發環境,不需要關心后台代碼是如何運行起來的,也不用管他究竟用了多少依賴包。

  3、對網絡環境不限制,無所謂是內網還是外網。

  這樣的想法是不錯的,不過需要解決的一個問題是前端搭建了自己的靜態服務器后,頁面上發出的ajax請求如何回應?因為我們本地是沒有真正的后台服務器接口的。所以我們要想辦法利用nginx把請求轉發到真正的遠程后台服務器上,然后后台服務器返回數據給nginx,nginx收到數據后再返回給我們頁面。這種技術一般成為請求轉發或者叫反向代理。

  (還有一種辦法就是通過判斷當location.href == localhost 時設置所有的API請求都用絕對路徑,然后關閉瀏覽器的跨域檢查。關閉跨域檢查方式,右鍵chrome屬性,在目標那里追加: --disable-web-security --user-data-dir=C:\tmp   注意是 追加!!!)

  使用nginx搭建靜態服務器這個不難,網上一大堆的教程,這里就不介紹了,難就難在如何請求轉發。下面放出一張nginx的配置圖

  配置很簡單,這里大概給大家講一下重點部分,

  1、location 支持配置項目的絕對路徑

  2、假設我們的后台API地址是以API開頭,location ^~ /api/ 代表nginx將會攔截請求地址中包含"/api/"字樣的請求,

其實這就是我們的ajax請求路徑,攔截到請求之后根據寫法會分成兩種情況把這個請求轉發到 下面 proxy_pass 的地址上。

  舉個例子:

  a、如上圖,如果proxy_pass 的URL以 / 結尾 ,那么請求轉發的時候 將 不會 帶上 匹配到的 /api/ ,也就是說如果

  登錄請求URL是localhost:60001/api/user/login,proxy_pass  URL 是 http://a.xx.com:8080/platform/,

  Nginx將會 把這個請求轉發成 http://a.xx.com:8080/platform/user/login 

  b、如果proxy_pass 的URL不以 / 結尾 ,那么請求轉發的時候 將帶上 匹配到的 /api/ ,也就是說如果

  登錄請求 URL是localhost:60001/api/user/login,proxy_pass  URL 是 http://a.xx.com:8080/platform,

  Nginx將會 把這個請求轉發成 http://a.xx.com:8080/platform/api/user/login 

  3、一般我們登錄之后服務器會通過Set-Cookie把token寫回到我們本地,如果不設置 proxy_cookie_path 的話,

  服務器Set-Cookie命令會失效,本地存不了cookie,從而導致token丟失。

  這里proxy_cookie_path有一點需要注意的是 如果 proxy_pass  URL 是 http://a.xx.com:8080/platform/ 這種情況,

  proxy_cookie_path應該設置成 /platform/ / (注意兩個斜杠之間有空格)。

  如果 proxy_pass  URL 是 http://a.xx.com:8080/這種情況  proxy_cookie_path應該設置成 / / (注意兩個斜杠之間有空格)

  重啟下nginx,你就會發現一切都正常了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM