nginx解决浏览器跨域问题_前端通过Nginx反向代理解决跨域问题
在前面寫的一篇文章SpringMVC解決跨域問題，我們探討了什么是跨域問題以及SpringMVC怎么解決跨域問題，解決方式主要有如下三種方式:
JSONP
CORS
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反向代理將對真實服務器的請求轉移到本機服務器來避免瀏覽器的"同源策略限制"。
參考文檔：
總結
以上是生活随笔為你收集整理的nginx解决浏览器跨域问题_前端通过Nginx反向代理解决跨域问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java计算加速减速_Javascrip
- 下一篇： html 点击div 改变高度,HTML