什么是跨域

跨域是指跨域名的訪問，以下情況都屬于跨域：

跨域原因說明示例

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

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

www.jd.com/item

www.jd.com/goods

為什么有跨域問題？

跨域不一定會有跨域問題。

因為跨域問題是瀏覽器對于ajax請求的一種安全限制：一個頁面發起的ajax請求，只能是與當前頁同域名的路徑，這能有效的阻止跨站攻擊。

因此：跨域問題 是針對ajax的一種限制。

但是這卻給我們的開發帶來了不變，而且在實際生成環境中，肯定會有很多臺服務器之間交互，地址和端口都可能不同，怎么辦？

解決跨域問題的方案：

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

1.Jsonp

最早的解決方案，利用script標簽可以跨域的原理實現。

限制：

1)需要服務的支持

2)只能發起GET請求

2.nginx反向代理

思路：

利用nginx反向代理把跨域為不跨域，支持各種請求方式

缺點：需要在nginx進行額外配置，語義不清晰

3.CORS

規范化的跨域請求解決方案，安全可靠。

優勢：

1)在服務端進行控制是否允許跨域，可自定義規則

2)支持各種請求方式

缺點：

1)會產生額外的請求

2)在服務端進行控制是否允許跨域，可自定義規則

3)支持各種請求方式

今天我們會用cors的跨域方案。

什么是cors

CORS是一個W3C標準，全稱是"跨域資源共享"(Cross-origin resource sharing)。

它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

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

瀏覽器端：

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

服務端：

CORS通信與AJAX沒有任何差別，因此你不需要改變以前的業務邏輯。只不過，瀏覽器會在請求中攜帶一些頭信息，我們需要以此判斷是否運行其跨域，然后在響應頭中加入一些信息即可。這一般通過過濾器完成即可。

原理有點復雜

瀏覽器會將所有請求分為兩類，其處理方案略有差異：簡單請求、特殊請求。

簡單請求

只要同時滿足以下兩大條件，就屬于簡單請求。

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

• HEAD

• GET

• POST

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

• Accept

• Accept-Language

• Content-Language

• Last-Event-ID

• Content-Type：只限于三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

當瀏覽器發現發現請求是簡單請求時，會在請求頭中攜帶一個字段：Origin.

Origin

Origin中會指出當前請求屬于哪個域(協議+域名+端口)。服務會根據這個值決定是否同意本次請求，也就是否允許其跨域。

如果服務器允許跨域，需要在返回的響應頭中攜帶下面信息：

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

• Access-Control-Allow-Origin：可接受的域，是一個具體域名或者*，代表任意

• Access-Control-Allow-Credentials：是否允許攜帶cookie，默認情況下，cors不會攜帶cookie，除非這個值是true

注意：

如果跨域請求要想操作cookie，需要滿足3個條件：

• 服務的響應頭中需要攜帶Access-Control-Allow-Credentials并且為true。

• 瀏覽器發起請求需要指定withCredentials 為true

• 響應頭中的Access-Control-Allow-Origin一定不能為*，必須是指定的域名

特殊請求

不符合簡單請求的條件，會被瀏覽器判定為特殊請求,比如請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json。。

特殊請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求(preflight)。

預檢請求

瀏覽器先詢問服務器，當前網頁所在的域名是否在服務器的許可名單之中，以及可以使用哪些HTTP動詞和頭信息字段。只有得到肯定答復，瀏覽器才會發出正式的XMLHttpRequest請求，否則就報錯。

一個“預檢”請求的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...

上面代碼中，你會發現多了一個自定義頭信息X-Custom-Header。

加上這個，瀏覽器就會自動識別為特殊請求，就自動發出一個"預檢"請求，要求服務器確認可以這樣請求。

與簡單請求相比，除了Origin以外，多了兩個頭：

• Access-Control-Request-Method：接下來會用到的請求方式，比如PUT

• Access-Control-Request-Headers：會額外用到的頭信息

預檢請求的響應

服務器收到預檢請求，檢查了多出的兩個字段后，如果許可跨域，會發出響應：

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個頭：

• Access-Control-Allow-Methods：允許訪問的方式

• Access-Control-Allow-Headers：允許攜帶的頭

• Access-Control-Max-Age：本次許可的有效時長，單位是秒，過期之前的ajax請求就無需再次進行預檢了

如果瀏覽器得到上述響應，則認定為可以跨域，后續就跟簡單請求的處理是一樣的了。

與JSONP的比較

CORS與JSONP的使用目的相同，但是比JSONP更強大。

但是JSONP只支持GET請求。

CORS支持所有類型的HTTP請求。

JSONP的優勢在于支持老式瀏覽器，以及可以向不支持CORS的網站請求數據。

(本期主題)

對于簡單請求來說：

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：

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

Access-Control-Request-Headers：

如果瀏覽器請求包括Access-Control-Request-Headers字段，則在Nginx配置中也是必須的，是一個由逗號分隔的字符串

Access-Control-Expose-Headers：

可選配字段。CORS請求，

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

Cache-Control、

Content-Language、

Content-Type、

Expires、

Last-Modified、

Pragma。

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

上面的例子指定，

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

非簡單請求是那種對服務器有特殊要求的請求，比如請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json。非簡單請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求(preflight)。

瀏覽器先詢問服務器，當前網頁所在的域名是否在服務器的許可名單之中，以及可以使用哪些HTTP動詞和頭信息字段。只有得到肯定答復，瀏覽器才會發出正式的XMLHttpRequest請求，否則就報錯。

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：

該字段是必須的，用來列出瀏覽器的CORS請求會用到哪些HTTP方法?

Access-Control-Max-Age：

用來指定本次預檢請求的有效期，單位為秒其他參數參考簡單請求即可

重啟即可。

遇到的問題場景：在不同源的資源不能在當前域名下顯示、調用。因為跨域。為了解決問題，所以這篇文章出來了。

參考文章：

《CORS on Nginx》：

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

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。