本文主要解決：使用nginx反向代理處理前後端跨域訪問的問題 問題如下： 問題分析： 禁止跨域問題其實是瀏覽器的一種安全行為 該問題是由於前端和後臺伺服器在不同伺服器(IP)上，前端訪問後臺無法通過同一條鏈路傳輸數據導致的，這時如果直接ajax遠程後臺伺服器，則會報錯 解決方法： 配置nginx，將 ...
本文主要解決：使用nginx反向代理處理前後端跨域訪問的問題
問題如下：
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
拓展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反向代理，可以找技術人員幫忙處理
完畢，呵呵呵呵
