欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2024年01月11日 16:37:43   作者:broadenBlueSea  
這篇文章主要介紹了Nginx處理跨域問題小結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1、前提條件

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

  • 服務(wù)端沒有處理跨域,且用postman測(cè)試服務(wù)接口正常
  • 當(dāng)網(wǎng)站8080去訪問服務(wù)端接口時(shí),就產(chǎn)生了跨域問題,那么如何解決?接下來我把跨域遇到的各種情況都列舉出來并通過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)求方法或者說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è)置)。不過不建議跨域使用(項(xiàng)目中用到過,不過不穩(wěn)定,有些瀏覽器帶不過去),除非必要,因?yàn)橛泻芏喾桨缚梢源妗?/p>

2 名詞說明

1、什么是預(yù)檢請(qǐng)求?
      當(dāng)發(fā)生跨域條件時(shí)候,覽器先詢問服務(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è)試代理是否成功,通過Nginx代理端口2222再次訪問接口,可以看到如下圖通過代理后接口也是能正常訪問
  • 接下來開始用網(wǎng)站8080訪問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.

  • 通過錯(cuò)誤信息可以很清晰的定位到錯(cuò)誤(注意看標(biāo)紅部分)priflight說明是個(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ù)器
  • 通過錯(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處理跨域問題的文章就介紹到這了,更多相關(guān)Nginx跨域問題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Nginx配置WebSocket代理的示例代碼

    Nginx配置WebSocket代理的示例代碼

    本文提供了關(guān)于Nginx的配置和日志記錄的詳細(xì)指南,介紹了如何使用whereis命令查找Nginx路徑,并通過man命令查看手冊(cè),同時(shí),詳解了解Nginx訪問日志的配置方法及參數(shù)含義,并分享了Nginx代理WebSocket的配置示例,感興趣的可以了解一下
    2024-10-10
  • Nginx反向代理及負(fù)載均衡如何實(shí)現(xiàn)(基于linux)

    Nginx反向代理及負(fù)載均衡如何實(shí)現(xiàn)(基于linux)

    這篇文章主要介紹了Nginx反向代理及負(fù)載均衡如何實(shí)現(xiàn)(基于linux),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-09-09
  • Nginx的405 not allowed錯(cuò)誤解決方法

    Nginx的405 not allowed錯(cuò)誤解決方法

    本文主要介紹了Nginx的405 not allowed錯(cuò)誤解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • Nginx啟動(dòng)不了原因解決(端口占用)

    Nginx啟動(dòng)不了原因解決(端口占用)

    本文主要介紹了Nginx啟動(dòng)不了原因解決(端口占用),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-06-06
  • Nginx 流量控制/限流的具體實(shí)現(xiàn)示例

    Nginx 流量控制/限流的具體實(shí)現(xiàn)示例

    限流是一種流量控制手段,用于限制單位時(shí)間內(nèi)可以通過系統(tǒng)的請(qǐng)求數(shù)或連接數(shù),本文主要介紹了Nginx流量控制/限流的具體實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下
    2024-07-07
  • 解讀nginx反向代理location和proxy_pass的映射關(guān)系

    解讀nginx反向代理location和proxy_pass的映射關(guān)系

    這篇文章主要介紹了解讀nginx反向代理location和proxy_pass的映射關(guān)系,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • Nginx重新編譯添加模塊的方法

    Nginx重新編譯添加模塊的方法

    這篇文章主要介紹了Nginx重新編譯添加模塊的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • Nginx服務(wù)器中配置GeoIP模塊來攔截指定國(guó)家IP

    Nginx服務(wù)器中配置GeoIP模塊來攔截指定國(guó)家IP

    Nginx中自帶GeoIP模塊可以屏蔽指定IP的請(qǐng)求,只不過默認(rèn)沒有被編譯,打開以后我們只要再下載一個(gè)IP規(guī)則就行,Nginx服務(wù)器中配置GeoIP模塊來攔截指定國(guó)家IP
    2016-06-06
  • Nginx的偽靜態(tài)配置中使用rewrite來實(shí)現(xiàn)自動(dòng)補(bǔ)全的實(shí)例

    Nginx的偽靜態(tài)配置中使用rewrite來實(shí)現(xiàn)自動(dòng)補(bǔ)全的實(shí)例

    這篇文章主要介紹了Nginx的偽靜態(tài)配置中使用rewrite來實(shí)現(xiàn)自動(dòng)補(bǔ)全的實(shí)例,文中對(duì)rewrite的相關(guān)參數(shù)和正則表達(dá)使用也做了介紹,需要的朋友可以參考下
    2015-12-12
  • windows系統(tǒng)下安裝Nginx及簡(jiǎn)單使用過程

    windows系統(tǒng)下安裝Nginx及簡(jiǎn)單使用過程

    Nginx是一個(gè)很強(qiáng)大的高性能Web和反向代理服務(wù),也是一種輕量級(jí)的Web服務(wù)器,可以作為獨(dú)立的服務(wù)器部署網(wǎng)站,應(yīng)用非常廣泛,特別是現(xiàn)在前后端分離的情況下,這篇文章主要介紹了windows系統(tǒng)下安裝Nginx以及簡(jiǎn)單使用,需要的朋友可以參考下
    2024-04-04

最新評(píng)論