1、前提條件

準備：
前端網站地址：http://localhost:8080
服務端網址：http://localhost:59200

• 服務端沒有處理跨域，且用postman測試服務接口正常
• 當網站8080去訪問服務端接口時，就產生了跨域問題，那么如何解決？接下來我把跨域遇到的各種情況都列舉出來并通過nginx代理的方式解決（后臺也是一樣的，只要你理解的原理）。

跨域主要涉及4個響應頭：
Access-Control-Allow-Origin 用于設置允許跨域請求源地址 （預檢請求和正式請求在跨域時候都會驗證）
Access-Control-Allow-Headers 跨域允許攜帶的特殊頭信息字段 （只在預檢請求驗證）
Access-Control-Allow-Methods 跨域允許的請求方法或者說HTTP動詞 （只在預檢請求驗證）
Access-Control-Allow-Credentials 是否允許跨域使用cookies，如果要跨域使用cookies，可以添加上此請求響應頭，值設為true（設置或者不設置，都不會影響請求發(fā)送，只會影響在跨域時候是否要攜帶cookies，但是如果設置，預檢請求和正式請求都需要設置）。不過不建議跨域使用（項目中用到過，不過不穩(wěn)定，有些瀏覽器帶不過去），除非必要，因為有很多方案可以代替。

2 名詞說明

1、什么是預檢請求？
      當發(fā)生跨域條件時候，覽器先詢問服務器，當前網頁所在的域名是否在服務器的許可名單之中，以及可以使用哪些HTTP動詞和頭信息字段。只有得到肯定答復，瀏覽器才會發(fā)出正式的XMLHttpRequest請求，否則就報錯

2.1、配置nginx代理

下面展示一些 內聯代碼片。

server {
    listen       22222;
    server_name  localhost;
    location  / {
        proxy_pass  http://localhost:59200;
    }
}

• 測試代理是否成功，通過Nginx代理端口2222再次訪問接口，可以看到如下圖通過代理后接口也是能正常訪問
• 接下來開始用網站8080訪問Nginx代理后的接口地址，報錯情況如下:

情況1

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet'
 from origin 'http://localhost:8080' has been blocked by CORS
 policy: Response to preflight request doesn't pass access 
 control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

• 通過錯誤信息可以很清晰的定位到錯誤（注意看標紅部分）priflight說明是個預請求，CORS 機制跨域會首先進行 preflight（一個 OPTIONS 請求）， 該請求成功后才會發(fā)送真正的請求。這一設計旨在確保服務器對 CORS 標準知情，以保護不支持 CORS 的舊服務器
• 通過錯誤信息，我們可以得到是預檢請求的請求響應頭缺少了 Access-Control-Allow-Origin，錯哪里，我們改哪里就好了。修改Nginx配置信息如下（紅色部分為添加部分），缺什么就補什么，很簡單明了

server {
    listen       22222;
    server_name  localhost;
    location  / {
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080';
            add_header Access-Control-Allow-Headers '*';
            add_header Access-Control-Allow-Methods '*';
            add_header Access-Control-Allow-Credentials 'true';
            return 204;
        }
        if ($request_method != 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
            add_header Access-Control-Allow-Credentials 'true';
        }
        proxy_pass  http://localhost:59200;
    }
}

到此這篇關于Nginx處理跨域問題的文章就介紹到這了,更多相關Nginx跨域問題內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論