當(dāng)前位置：首頁(yè) > 运维知识 > Nginx >内容正文

Nginx

cors跨域_Nginx通过CORS配置实现跨域访问

發(fā)布時(shí)間：2024/9/3 Nginx 88 豆豆

生活随笔收集整理的這篇文章主要介紹了 cors跨域_Nginx通过CORS配置实现跨域访问小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

什么是跨域

跨域是指跨域名的訪問(wèn)，以下情況都屬于跨域：

跨域原因說(shuō)明示例

域名不同	www.jd.com 與 www.taobao.com
域名相同，端口不同	www.jd.com:8080 與 www.jd.com:8081
二級(jí)域名不同	item.jd.com 與 miaosha.jd.com

如果域名和端口都相同，但是請(qǐng)求路徑不同，不屬于跨域，如：

www.jd.com/item

www.jd.com/goods

為什么有跨域問(wèn)題？

跨域不一定會(huì)有跨域問(wèn)題。

因?yàn)榭缬騿?wèn)題是瀏覽器對(duì)于ajax請(qǐng)求的一種安全限制：一個(gè)頁(yè)面發(fā)起的ajax請(qǐng)求，只能是與當(dāng)前頁(yè)同域名的路徑，這能有效的阻止跨站攻擊。

因此：跨域問(wèn)題是針對(duì)ajax的一種限制。

但是這卻給我們的開(kāi)發(fā)帶來(lái)了不變，而且在實(shí)際生成環(huán)境中，肯定會(huì)有很多臺(tái)服務(wù)器之間交互，地址和端口都可能不同，怎么辦？

解決跨域問(wèn)題的方案：

目前比較常用的跨域解決方案有3種：

1.Jsonp

最早的解決方案，利用script標(biāo)簽可以跨域的原理實(shí)現(xiàn)。

限制：

1)需要服務(wù)的支持

2)只能發(fā)起GET請(qǐng)求

2.nginx反向代理

思路：

利用nginx反向代理把跨域?yàn)椴豢缬?#xff0c;支持各種請(qǐng)求方式

缺點(diǎn)：需要在nginx進(jìn)行額外配置，語(yǔ)義不清晰

3.CORS

規(guī)范化的跨域請(qǐng)求解決方案，安全可靠。

優(yōu)勢(shì)：

1)在服務(wù)端進(jìn)行控制是否允許跨域，可自定義規(guī)則

2)支持各種請(qǐng)求方式

缺點(diǎn)：

1)會(huì)產(chǎn)生額外的請(qǐng)求

2)在服務(wù)端進(jìn)行控制是否允許跨域，可自定義規(guī)則

3)支持各種請(qǐng)求方式

今天我們會(huì)用cors的跨域方案。

什么是cors

CORS是一個(gè)W3C標(biāo)準(zhǔn)，全稱(chēng)是"跨域資源共享"(Cross-origin resource sharing)。

它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請(qǐng)求，從而克服了AJAX只能同源使用的限制。

CORS需要瀏覽器和服務(wù)器同時(shí)支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。

瀏覽器端：

目前，所有瀏覽器都支持該功能(IE10以下不行)。整個(gè)CORS通信過(guò)程，都是瀏覽器自動(dòng)完成，不需要用戶(hù)參與。

服務(wù)端：

CORS通信與AJAX沒(méi)有任何差別，因此你不需要改變以前的業(yè)務(wù)邏輯。只不過(guò)，瀏覽器會(huì)在請(qǐng)求中攜帶一些頭信息，我們需要以此判斷是否運(yùn)行其跨域，然后在響應(yīng)頭中加入一些信息即可。這一般通過(guò)過(guò)濾器完成即可。

原理有點(diǎn)復(fù)雜

瀏覽器會(huì)將所有請(qǐng)求分為兩類(lèi)，其處理方案略有差異：簡(jiǎn)單請(qǐng)求、特殊請(qǐng)求。

簡(jiǎn)單請(qǐng)求

只要同時(shí)滿(mǎn)足以下兩大條件，就屬于簡(jiǎn)單請(qǐng)求。

(1) 請(qǐng)求方法是以下三種方法之一：

HEAD
GET
POST

(2)HTTP的頭信息不超出以下幾種字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三個(gè)值application/x-www-form-urlencoded、multipart/form-data、text/plain

當(dāng)瀏覽器發(fā)現(xiàn)發(fā)現(xiàn)請(qǐng)求是簡(jiǎn)單請(qǐng)求時(shí)，會(huì)在請(qǐng)求頭中攜帶一個(gè)字段：Origin.

Origin

Origin中會(huì)指出當(dāng)前請(qǐng)求屬于哪個(gè)域(協(xié)議+域名+端口)。服務(wù)會(huì)根據(jù)這個(gè)值決定是否同意本次請(qǐng)求，也就是否允許其跨域。

如果服務(wù)器允許跨域，需要在返回的響應(yīng)頭中攜帶下面信息：

Access-Control-Allow-Origin: http://www.jd.comAccess-Control-Allow-Credentials: trueContent-Type: text/html; charset=utf-8

Access-Control-Allow-Origin：可接受的域，是一個(gè)具體域名或者*，代表任意
Access-Control-Allow-Credentials：是否允許攜帶cookie，默認(rèn)情況下，cors不會(huì)攜帶cookie，除非這個(gè)值是true

注意：

如果跨域請(qǐng)求要想操作cookie，需要滿(mǎn)足3個(gè)條件：

服務(wù)的響應(yīng)頭中需要攜帶Access-Control-Allow-Credentials并且為true。
瀏覽器發(fā)起請(qǐng)求需要指定withCredentials 為true
響應(yīng)頭中的Access-Control-Allow-Origin一定不能為*，必須是指定的域名

特殊請(qǐng)求

不符合簡(jiǎn)單請(qǐng)求的條件，會(huì)被瀏覽器判定為特殊請(qǐng)求,比如請(qǐng)求方法是PUT或DELETE，或者Content-Type字段的類(lèi)型是application/json。。

特殊請(qǐng)求的CORS請(qǐng)求，會(huì)在正式通信之前，增加一次HTTP查詢(xún)請(qǐng)求，稱(chēng)為"預(yù)檢"請(qǐng)求(preflight)。

預(yù)檢請(qǐng)求

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

一個(gè)“預(yù)檢”請(qǐng)求的Demo：

OPTIONS /cors HTTP/1.1Origin: http://www.jd.comAccess-Control-Request-Method: PUTAccess-Control-Request-Headers: X-Custom-HeaderHost: api.jd.comAccept-Language: en-USConnection: keep-aliveUser-Agent: Mozilla/5.0...

上面代碼中，你會(huì)發(fā)現(xiàn)多了一個(gè)自定義頭信息X-Custom-Header。

加上這個(gè)，瀏覽器就會(huì)自動(dòng)識(shí)別為特殊請(qǐng)求，就自動(dòng)發(fā)出一個(gè)"預(yù)檢"請(qǐng)求，要求服務(wù)器確認(rèn)可以這樣請(qǐng)求。

與簡(jiǎn)單請(qǐng)求相比，除了Origin以外，多了兩個(gè)頭：

Access-Control-Request-Method：接下來(lái)會(huì)用到的請(qǐng)求方式，比如PUT
Access-Control-Request-Headers：會(huì)額外用到的頭信息

預(yù)檢請(qǐng)求的響應(yīng)

服務(wù)器收到預(yù)檢請(qǐng)求，檢查了多出的兩個(gè)字段后，如果許可跨域，會(huì)發(fā)出響應(yīng)：

HTTP/1.1 200 OKDate: Tue,?14?Jul?2020?08:58:25?GMTAccess-Control-Allow-Origi: ?http://www.jd.comAccess-Control-Allow-Credential: ?trueAccess-Control-Allow-Methods: GET, POST, PUTAccess-Control-Allow-Headers: X-Custom-HeaderAccess-Control-Max-Age: 1728000Content-Type: text/html; charset=utf-8Content-Encoding: gzipContent-Length: 0Keep-Alive: timeout=2, max=100Connection: Keep-AliveContent-Type: text/plain

除了Access-Control-Allow-Origin和Access-Control-Allow-Credentials以外，這里又額外多出3個(gè)頭：

Access-Control-Allow-Methods：允許訪問(wèn)的方式
Access-Control-Allow-Headers：允許攜帶的頭
Access-Control-Max-Age：本次許可的有效時(shí)長(zhǎng)，單位是秒，過(guò)期之前的ajax請(qǐng)求就無(wú)需再次進(jìn)行預(yù)檢了

如果瀏覽器得到上述響應(yīng)，則認(rèn)定為可以跨域，后續(xù)就跟簡(jiǎn)單請(qǐng)求的處理是一樣的了。

與JSONP的比較

CORS與JSONP的使用目的相同，但是比JSONP更強(qiáng)大。

但是JSONP只支持GET請(qǐng)求。

CORS支持所有類(lèi)型的HTTP請(qǐng)求。

JSONP的優(yōu)勢(shì)在于支持老式瀏覽器，以及可以向不支持CORS的網(wǎng)站請(qǐng)求數(shù)據(jù)。

(本期主題)

對(duì)于簡(jiǎn)單請(qǐng)求來(lái)說(shuō)：

if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';????add_header?'Access-Control-Expose-Headers'?'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';?}

上面的配置中：

Access-Control-Allow-Origin：

必須配置的字段，'*'表示接受任意域名的請(qǐng)求，也可以指定接受某一個(gè)域名的請(qǐng)求

Access-Control-Request-Headers：

如果瀏覽器請(qǐng)求包括Access-Control-Request-Headers字段，則在Nginx配置中也是必須的，是一個(gè)由逗號(hào)分隔的字符串

Access-Control-Expose-Headers：

可選配字段。CORS請(qǐng)求，

XMLHttpRequest對(duì)象的getResponseHeader()方法只能拿到6個(gè)基本字段：

Cache-Control、

Content-Language、

Content-Type、

Expires、

Last-Modified、

Pragma。

如果想拿到其他字段，就必須在Access-Control-Expose-Headers里面指定。

上面的例子指定，

getResponseHeader('FooBar')可以返回FooBar字段的值

非簡(jiǎn)單請(qǐng)求是那種對(duì)服務(wù)器有特殊要求的請(qǐng)求，比如請(qǐng)求方法是PUT或DELETE，或者Content-Type字段的類(lèi)型是application/json。非簡(jiǎn)單請(qǐng)求的CORS請(qǐng)求，會(huì)在正式通信之前，增加一次HTTP查詢(xún)請(qǐng)求，稱(chēng)為"預(yù)檢"請(qǐng)求(preflight)。

if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain charset=UTF-8'; add_header 'Content-Length' 0; return 204;?}

Access-Control-Request-Method：

該字段是必須的，用來(lái)列出瀏覽器的CORS請(qǐng)求會(huì)用到哪些HTTP方法?

Access-Control-Max-Age：

用來(lái)指定本次預(yù)檢請(qǐng)求的有效期，單位為秒其他參數(shù)參考簡(jiǎn)單請(qǐng)求即可

重啟即可。

遇到的問(wèn)題場(chǎng)景：在不同源的資源不能在當(dāng)前域名下顯示、調(diào)用。因?yàn)榭缬颉榱私鉀Q問(wèn)題，所以這篇文章出來(lái)了。

參考文章：

《CORS on Nginx》：

https://enable-cors.org/server_nginx.html

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的cors跨域_Nginx通过CORS配置实现跨域访问的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： html页面源码_整合SpringMVC
下一篇： mysql某个值连续出现的记录_MySQ