nginx(一)：跨域問題

• 爲什麼會發生AJAX跨域？

瀏覽器限制

跨域

XHR(XMLHttpRequest)請求

同時滿足以上三個條件的時候纔會出現跨域問題

 

• 解決方案：

被調用方解決方案（支持跨域）：

前端代碼寫法（假設：a.com 調用方，b.com被調用方）如下，直接在代碼中寫明被調用方的具體地址

$.getJSON("http://b.com/test/get1").then(function(jsonObj) {
        result = jsonObj;
});

1. 瀏覽器直接發送請求到其他域的應用服務器

瀏覽器在請求頭中添加Origin參數記錄host，應用服務器通過實現filter,在響應頭中設置Access-Control-Allow-Origin參數爲host，從而通過瀏覽器的檢驗，達到跨域的目的

 

 

帶Cookie的跨域

1. Access-Control-Allow-Origin:*?  這個參數的值不可以爲*，需要是具體調用方的host，可以通過動態讀取請求頭的Origin參數設置該參數的值。

2. 發送的cookie是被調用方域名的cookie,而不是調用方的cookie

 

2. 瀏覽器將請求發送到其他域系統的http服務器（如：apache，nginx），然後http服務器再將請求發送到應用服務器。（在http服務器中配置請求頭）

nginx配置如下：

 

調用方解決方案（隱藏跨域）：

nginx配置：
server {
    listen       80;
    server_name  a.com;

    location / {
        proxy_pass http://localhost:8081/ ;
    }
    
    location /panda {
        proxy_pass http://localhost:8080/test ;
    }
}

前端代碼：
$.getJSON("/panda/get1").then(function(jsonObj) {
                   result = jsonObj;
               });

注意：這裏url用的相對地址 就是訪問 a.com/panda ，然後nginx的設置會使其反向代理到http://localhost:8080/test

實際上是a.com訪問http://localhost:8080/test，但是 瀏覽器看起來是a.com訪問a.com/panda根本沒跨域! 當然麼有跨域問題!

通過nginx解決跨域問題，兩種方案的區別是：這個nginx是安裝在調用方還是被調用方，安裝在調用方，那麼前端只需要寫出相對地址url，安裝在被調用方，那麼前端需要寫出被調用方的絕對路徑

 

• nginx location匹配優先級：https://blog.csdn.net/agonie201218/article/details/92795522
• nginx反向代理實現負載均衡

http {
    upstream upstream_name{
        server 192.168.0.28:8001;
        server 192.168.0.28:8002;
    }

    server {
        listen       8080;
        server_name  localhost;

        location / {
            proxy_pass http://upstream_name;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}