前端通過Nginx反向代理解決跨域問題

在前面寫的一篇文章SpringMVC 跨域，我們探討了什么是跨域問題以及SpringMVC怎么解決跨域問題，解決方式主要有如下三種方式:

1. JSONP
2. CORS
3. WebSocket

可是這幾種方式都是基於服務器配置的，即對於自己的網站是可以通過這幾種方式解決的，可是現在遇到另一個需求(前面提到過，寫扇貝插件，我們不能更改扇貝的服務器配置，也不能發短信叫他們給我配置一下)。

本文探討了前端如何通過Nginx反向代理的方式解決跨域問題。

跨域

再次重申： 跨域是瀏覽器行為，不是服務器行為。

實際上，請求已經到達服務器了，只不過在回來的時候被瀏覽器限制了。就像Python他可以進行抓取數據一樣，不經過瀏覽器而發起請求是可以得到數據，想到通過Nginx的反向代理來解決跨域問題。

代理

所謂代理就是在我們和真實的服務器之間有一台代理服務器，我們所有的請求都是通過它來進行轉接的。

正向代理

正向代理就是我們訪問不了Google，但是我在國外有一台vps，它可以訪問Google，我訪問它，叫它訪問Google后，把數據傳給我。

正向代理隱藏了真實的客戶端。

反向代理

大家都有過這樣的經歷，撥打10086客服電話，可能一個地區的10086客服有幾個或者幾十個，你永遠都不需要關心在電話那頭的是哪一個，叫什么，男的，還是女的，漂亮的還是帥氣的，你都不關心，你關心的是你的問題能不能得到專業的解答，你只需要撥通了10086的總機號碼，電話那頭總會有人會回答你，只是有時慢有時快而已。那么這里的10086總機號碼就是我們說的反向代理。客戶不知道真正提供服務人的是誰。

反向代理隱藏了真實的服務端，當我們請求 www.baidu.com 的時候，就像撥打10086一樣，背后可能有成千上萬台服務器為我們服務，但具體是哪一台，你不知道，也不需要知道，你只需要知道反向代理服務器是誰就好了，www.baidu.com 就是我們的反向代理服務器，反向代理服務器會幫我們把請求轉發到真實的服務器那里去。Nginx就是性能非常好的反向代理服務器，用來做負載均衡。

反向代理隱藏了真實的服務器。

Nginx 就是一個很好的反向代理服務器，當然apache也可以實現此功能。

windows下Apache配置參考這篇文章： Windows Apache服務器配置

Nginx

Nginx（發音同engine x）是一個 Web服務器，也可以用作反向代理，負載平衡器和 HTTP緩存。該軟件由 Igor Sysoev 創建，並於2004年首次公開發布。同名公司成立於2011年，以提供支持。

我在Windows下實現Nginx負載均衡提到過Windows下Nginx命令使用。

Nginx 反向代理模塊 proxy_pass

proxy_pass 后面跟着一個 URL，用來將請求反向代理到 URL 參數指定的服務器上。例如我們上面例子中的 proxy_pass https://api.shanbay.com，則將匹配的請求反向代理到 https://api.shanbay.com。

通過在配置文件中增加proxy_pass 你的服務器ip,例如這里的扇貝服務器地址，就可以完成反向代理。

server { listen 80; server_name localhost; ## 用戶訪問 localhost，則反向代理到https://api.shanbay.com location / { root html; index index.html index.htm; proxy_pass https://api.shanbay.com; } }

配置html以文件方式打開

一般的情況下，我們的HTML文件時放置在Nginx服務器上面的，即通過輸入 http://localhost/index.html ，但是在前端進行調試的時候，我們可能是通過 使用 file:///E:/nginx/html/index.html 來打開HTML。服務器打開不是特別方便。

而我們之所以要部署在服務器上，是想要使用瀏覽器自帶的CORS頭來解決跨域問題，如果不想把HTML放置在Nginx中，而想通過本地打開的方式來調試HTML，可以通過自己添加Access-Control-Allow-Origin等http頭，但是我們的AJAX請求一定要加上http://127.0.0.1/request，而不能直接是 /request，於是將nginx.conf作如下配置：

location / { root html; index index.html index.htm; # 配置html以文件方式打開 if ($request_method = 'POST') { add_header 'Access-Control-Allow-Origin' *; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; } if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' *; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; } # 代理到8080端口 proxy_pass http://127.0.0.1:8080; }

處理DELETE和PUT跨域請求

而現在我的后台是restful風格的接口，采用了delete和put方法，而上面的配置就無能為力了。

可以通過增加對非簡單請求的判斷來解決DELETE和PUT跨域請求。

非簡單請求是那種對服務器有特殊要求的請求，比如請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json。

非簡單請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求（preflight）。

服務器收到"預檢"請求以后，檢查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，確認允許跨源請求，就可以做出回應。

因此，為了使Nginx可以處理delete等非簡單請求，Nginx需要作出相應的改變，更改配置如下

location / { # 完成瀏覽器的"預檢"請求 if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Credentials true; add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; return 204; } # 配置html在本地打開 if ($request_method = 'POST') { add_header 'Access-Control-Allow-Origin' *; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; } if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' *; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; } root html; index index.html index.htm; # 配置html在Nginx中打開 location ~* \.(html|htm)$ { } # 代理到8080端口 proxy_pass http://127.0.0.1:8080; }

我們還必須把我們的html代碼放在Nginx中html文件夾內，即使用Nginx當做我們的前端服務器。

URL重寫

有時候我們僅僅只想將/api下的url反向代理到后端，可以通過在nginx.conf中配置url重寫規則如下：

location / { root html; index index.html index.htm; location ^~ /api { rewrite ^/api/(.*)$ /$1 break; proxy_pass https://api.shanbay.com/; } }

這樣的話，我們只用處理/api下的url。

在配置文件中我們通過rewrite將URL重寫為真正要請求的URL，通過proxy_pass代理到真實的服務器IP或者域名。

Cookie

如果Cookie的域名部分與當前頁面的域名不匹配就無法寫入。所以如果請求 www.a.com ，服務器 proxy_pass 到 www.b.com 域名，然后 www.b.com 輸出 domian=b.com 的 Cookie，前端的頁面依然停留在 www.a.com 上，於是瀏覽器就無法將 Cookie 寫入。

可在nginx反向代理中設置：

location / { # 頁面地址是a.com，但是要用b.com的cookie proxy_cookie_domain b.com a.com; #注意別寫錯位置了 proxy_cookie_path / /; proxy_pass http://b.com; } 

總結

Nginx解決跨域問題通過Nginx反向代理將對真實服務器的請求轉移到本機服務器來避免瀏覽器的"同源策略限制"。

參考文檔：

1. Nginx反向代理配置（解決跨域問題）
2. 這兩篇文章講解了URL重寫的規則和用法
   • nginx配置url重寫
   • nginx配置location總結及rewrite規則寫法
3. Nginx配置文件詳解