使用nginx反向代理處理先後端跨域訪問

本文主要解決：使用nginx反向代理處理先後端跨域訪問的問題

1.何爲跨域訪問？

如下類型爲跨域訪問

1）不一樣域名間訪問

www.zuiyoujie.com和www.baidu.com

2）同域名不一樣端口

www.zuiyoujie.com和www.zuiyoujie.com:8080

3）同於名不一樣協議

http和https

4）域名和該域名本身的IP

www.zuiyoujie.com和本身解析的IP：192.168.1.1

5）二級域名相同，三級級域名不一樣

aaa.zuiyoujie.com和ttt.zuiyoujie.com
www.zuiyoujie.com和zuiyoujie.com等

如下類型爲本域訪問：

1）同一域名不一樣的子路徑

www.zuiyoujie.com/a.html和www.zuiyoujie.com/b.html

2.跨域的常看法決方法（摘錄）

https://www.cnblogs.com/gabrielchen/p/5066120.html

目前來說沒有不依靠服務器端來跨域請求資源的技術

1.jsonp 須要目標服務器配合一個callback函數。
2.window.name+iframe 須要目標服務器響應window.name。
3.window.location.hash+iframe 一樣須要目標服務器做處理。
4.html5的 postMessage+ifrme 這個也是須要目標服務器或者說是目標頁面寫一個postMessage，主要側重於前端通信。
5.CORS 須要服務器設置header ：Access-Control-Allow-Origin。
6.nginx反向代理，能夠找技術人員幫忙處理

3.跨域訪問實例

報錯以下：

Failed to load http://192.168.1.137:8081/service/getStation?Line=1: No 'Access-Control-Allow-Origin'header is present on the requested resource. 
Origin 'http://192.168.1.136:8081' is therefore not allowed access.

錯誤分析：

禁止跨域問題實際上是瀏覽器的一種安全行爲

該問題是因爲前端和後臺服務器在不一樣服務器(IP)上，前端訪問後臺沒法經過同一條鏈路傳輸數據致使的，這時若是直接ajax遠程後臺服務器，則會報錯

解決方法：

配置nginx，將前端的訪問請求和後端的響應都經過nginx反向代理進行處理

相似上面這個：

192.168.1.136:8081　　是前端， 192.168.1.137:8081　　是後臺，tomcat 192.168.1.11 是nginx服務器

編輯nginx配置文件，配置如下內容

vim from_front_to_background.conf

# For Front end server { listen 8136; server_name 192.168.1.11; charset utf-8; location / { proxy_pass http://192.168.1.136:8081;  } } # For background server { listen 8137; server_name 192.168.1.11; charset utf-8; location / { proxy_pass http://192.168.1.137:8081;  proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }

如下參數可加可不加，看是否能用到

proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

配置完成，從新加載nginx配置文件，前端訪問192.168.1.11:8136進行後續調試便可

service nginx reload

其餘能夠添加的參數：
根據報錯內容裏找到的，我本身弄的話沒用到也能夠解決該問題，
若是有問題能夠將如下參數添加到location標籤裏

add_header 'Access-Control-Allow-Origin' 'http://www.zuiyoujie.com'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET';

第一條：受權從www.zuiyoujie.com的請求，若是要相應來自任何域的請求能夠將域名改爲「*」,

也有說該方式適用於別人訪問咱們的狀況

第二條：當該標誌爲真時，響應於該請求是否能夠被暴露
第三天：指定請求的方法，能夠是GET，POST等

ajax跨域請求測試，成功時，響應頭是以下所示：

HTTP/1.1 200 OK Server: nginx Access-Control-Allow-Origin: www.zuiyoujie.com

完畢，呵呵呵呵