Nginx處理跨域問題小結(jié)
1、前提條件
準備:前端網(wǎng)站地址:http://localhost:8080
服務(wù)端網(wǎng)址:http://localhost:59200
- 服務(wù)端沒有處理跨域,且用postman測試服務(wù)接口正常
- 當網(wǎng)站8080去訪問服務(wù)端接口時,就產(chǎn)生了跨域問題,那么如何解決?接下來我把跨域遇到的各種情況都列舉出來并通過nginx代理的方式解決(后臺也是一樣的,只要你理解的原理)。
跨域主要涉及4個響應(yīng)頭:
Access-Control-Allow-Origin 用于設(shè)置允許跨域請求源地址 (預(yù)檢請求和正式請求在跨域時候都會驗證)
Access-Control-Allow-Headers 跨域允許攜帶的特殊頭信息字段 (只在預(yù)檢請求驗證)
Access-Control-Allow-Methods 跨域允許的請求方法或者說HTTP動詞 (只在預(yù)檢請求驗證)
Access-Control-Allow-Credentials 是否允許跨域使用cookies,如果要跨域使用cookies,可以添加上此請求響應(yīng)頭,值設(shè)為true(設(shè)置或者不設(shè)置,都不會影響請求發(fā)送,只會影響在跨域時候是否要攜帶cookies,但是如果設(shè)置,預(yù)檢請求和正式請求都需要設(shè)置)。不過不建議跨域使用(項目中用到過,不過不穩(wěn)定,有些瀏覽器帶不過去),除非必要,因為有很多方案可以代替。
2 名詞說明
1、什么是預(yù)檢請求?
當發(fā)生跨域條件時候,覽器先詢問服務(wù)器,當前網(wǎng)頁所在的域名是否在服務(wù)器的許可名單之中,以及可以使用哪些HTTP動詞和頭信息字段。只有得到肯定答復(fù),瀏覽器才會發(fā)出正式的XMLHttpRequest請求,否則就報錯
2.1、配置nginx代理
下面展示一些 內(nèi)聯(lián)代碼片
。
server { listen 22222; server_name localhost; location / { proxy_pass http://localhost:59200; } }
- 測試代理是否成功,通過Nginx代理端口2222再次訪問接口,可以看到如下圖通過代理后接口也是能正常訪問
- 接下來開始用網(wǎng)站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說明是個預(yù)請求,CORS 機制跨域會首先進行 preflight(一個 OPTIONS 請求), 該請求成功后才會發(fā)送真正的請求。這一設(shè)計旨在確保服務(wù)器對 CORS 標準知情,以保護不支持 CORS 的舊服務(wù)器
- 通過錯誤信息,我們可以得到是預(yù)檢請求的請求響應(yīng)頭缺少了 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; } }
到此這篇關(guān)于Nginx處理跨域問題的文章就介紹到這了,更多相關(guān)Nginx跨域問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Nginx反向代理及負載均衡如何實現(xiàn)(基于linux)
這篇文章主要介紹了Nginx反向代理及負載均衡如何實現(xiàn)(基于linux),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09解讀nginx反向代理location和proxy_pass的映射關(guān)系
這篇文章主要介紹了解讀nginx反向代理location和proxy_pass的映射關(guān)系,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01Nginx服務(wù)器中配置GeoIP模塊來攔截指定國家IP
Nginx中自帶GeoIP模塊可以屏蔽指定IP的請求,只不過默認沒有被編譯,打開以后我們只要再下載一個IP規(guī)則就行,Nginx服務(wù)器中配置GeoIP模塊來攔截指定國家IP2016-06-06Nginx的偽靜態(tài)配置中使用rewrite來實現(xiàn)自動補全的實例
這篇文章主要介紹了Nginx的偽靜態(tài)配置中使用rewrite來實現(xiàn)自動補全的實例,文中對rewrite的相關(guān)參數(shù)和正則表達使用也做了介紹,需要的朋友可以參考下2015-12-12windows系統(tǒng)下安裝Nginx及簡單使用過程
Nginx是一個很強大的高性能Web和反向代理服務(wù),也是一種輕量級的Web服務(wù)器,可以作為獨立的服務(wù)器部署網(wǎng)站,應(yīng)用非常廣泛,特別是現(xiàn)在前后端分離的情況下,這篇文章主要介紹了windows系統(tǒng)下安裝Nginx以及簡單使用,需要的朋友可以參考下2024-04-04