引言:在先後端分離架構下,不免會遇到跨域問題。目前的解決方案大體有JSONP,反向代理,CORS這三種方式。JSONP兼容性良好,最大的缺點是隻支持GET方式請求。反向代理方式簡單完全,基本只須要服務器配置便可完成。CORS由服務提供程序主動聲明本身可信任源,目前的缺點是老式瀏覽器沒法支持。html
問題:反向代理如何實現?前端
解決方案:使用Nginx輕鬆搞定反向代理。配置很簡單,還附帶負載均衡配置方法。nginx
步驟1.下載Nginx。最新下載地址:http://nginx.org/en/download.html後端
步驟2.修改/ conf/ nginx.conf配置文件。Nginx運行起來。api
訪問localhost:8000/index.html會直接訪問發佈的靜態文件。訪問localhost:8000/api/index.html會被輪詢分配到localhost:8005/index.html和localhost:8006/index.html。這樣就能保證前端和後端服務在同源下,完全解決跨域問題。同時api還實現了負載均衡,減輕了服務器壓力。跨域
步驟3,設置服務端cookie的path和domain。瀏覽器
效果:服務器
涉及配置文件內容: cookie
#設定負載均衡的服務器列表 #weight越大,負載的權重就越大。8006的訪問量是8005的兩倍 upstream targetserver{ #ip_hash;#按訪問ip的hash結果分配,解決Session跨服務器問題 server localhost:8005 weight=1; server localhost:8006 weight=2; }
location ^~ /api/ { #proxy_pass http://localhost:8006;#反向代理方式1 proxy_pass http://targetserver; #反向代理2,也可作負載均衡。 #proxy_redirect default ; proxy_redirect off ; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; client_max_body_size 50m; client_body_buffer_size 256k; proxy_connect_timeout 30; proxy_send_timeout 30; proxy_read_timeout 60; proxy_buffer_size 256k; proxy_buffers 4 256k; proxy_busy_buffers_size 256k; proxy_temp_file_write_size 256k; proxy_next_upstream error timeout invalid_header http_500 http_503 http_404; proxy_max_temp_file_size 128m; rewrite /api/(.+)$ /$1 break;#將/api/後面的路由直接轉發到目標服務器的根目錄 } location / { autoindex on; index index.html index.htm; root "E:\02源代碼管理\技術文檔\AngularJsDemo"; }
----------------------------------------------------正文結束分割線---------------------------------------------------- 架構
upstream還能夠爲每一個設備設置狀態值,這些狀態值的含義分別以下:
down 表示單前的server暫時不參與負載.
weight 默認爲1.weight越大,負載的權重就越大。
max_fails :容許請求失敗的次數默認爲1.當超過最大次數時,返回proxy_next_upstream 模塊定義的錯誤.
fail_timeout : max_fails次失敗後,暫停的時間。
backup: 其它全部的非backup機器down或者忙的時候,請求backup機器。因此這臺機器壓力會最輕。