快捷導(dǎo)航

Nginx處理跨域問(wèn)題小結(jié)

更新時(shí)間：2024年01月11日 16:37:43 作者：broadenBlueSea

這篇文章主要介紹了Nginx處理跨域問(wèn)題小結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1、前提條件

準(zhǔn)備：
前端網(wǎng)站地址：http://localhost:8080
服務(wù)端網(wǎng)址：http://localhost:59200

服務(wù)端沒(méi)有處理跨域，且用postman測(cè)試服務(wù)接口正常
當(dāng)網(wǎng)站8080去訪問(wèn)服務(wù)端接口時(shí)，就產(chǎn)生了跨域問(wèn)題，那么如何解決？接下來(lái)我把跨域遇到的各種情況都列舉出來(lái)并通過(guò)nginx代理的方式解決（后臺(tái)也是一樣的，只要你理解的原理）。

跨域主要涉及4個(gè)響應(yīng)頭：
Access-Control-Allow-Origin 用于設(shè)置允許跨域請(qǐng)求源地址（預(yù)檢請(qǐng)求和正式請(qǐng)求在跨域時(shí)候都會(huì)驗(yàn)證）
Access-Control-Allow-Headers 跨域允許攜帶的特殊頭信息字段（只在預(yù)檢請(qǐng)求驗(yàn)證）
Access-Control-Allow-Methods 跨域允許的請(qǐng)求方法或者說(shuō)HTTP動(dòng)詞（只在預(yù)檢請(qǐng)求驗(yàn)證）
Access-Control-Allow-Credentials 是否允許跨域使用cookies，如果要跨域使用cookies，可以添加上此請(qǐng)求響應(yīng)頭，值設(shè)為true（設(shè)置或者不設(shè)置，都不會(huì)影響請(qǐng)求發(fā)送，只會(huì)影響在跨域時(shí)候是否要攜帶cookies，但是如果設(shè)置，預(yù)檢請(qǐng)求和正式請(qǐng)求都需要設(shè)置）。不過(guò)不建議跨域使用（項(xiàng)目中用到過(guò)，不過(guò)不穩(wěn)定，有些瀏覽器帶不過(guò)去），除非必要，因?yàn)橛泻芏喾桨缚梢源妗?/p>

2 名詞說(shuō)明

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

2.1、配置nginx代理

下面展示一些 內(nèi)聯(lián)代碼片。

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

測(cè)試代理是否成功，通過(guò)Nginx代理端口2222再次訪問(wèn)接口，可以看到如下圖通過(guò)代理后接口也是能正常訪問(wèn)
接下來(lái)開始用網(wǎng)站8080訪問(wèn)Nginx代理后的接口地址，報(bào)錯(cuò)情況如下:

情況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.

通過(guò)錯(cuò)誤信息可以很清晰的定位到錯(cuò)誤（注意看標(biāo)紅部分）priflight說(shuō)明是個(gè)預(yù)請(qǐng)求，CORS 機(jī)制跨域會(huì)首先進(jìn)行 preflight（一個(gè) OPTIONS 請(qǐng)求），該請(qǐng)求成功后才會(huì)發(fā)送真正的請(qǐng)求。這一設(shè)計(jì)旨在確保服務(wù)器對(duì) CORS 標(biāo)準(zhǔn)知情，以保護(hù)不支持 CORS 的舊服務(wù)器
通過(guò)錯(cuò)誤信息，我們可以得到是預(yù)檢請(qǐng)求的請(qǐng)求響應(yīng)頭缺少了 Access-Control-Allow-Origin，錯(cuò)哪里，我們改哪里就好了。修改Nginx配置信息如下（紅色部分為添加部分），缺什么就補(bǔ)什么，很簡(jiǎn)單明了

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;
    }
}

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

您可能感興趣的文章: