前后端分離的項(xiàng)目中會(huì)碰到跨域的問(wèn)題。在應(yīng)用的日志中當(dāng)出現(xiàn)403跨域錯(cuò)誤的時(shí)候 No 'Access-Control-Allow-Origin' header is present on the requested resource，需要給Nginx服務(wù)器配置響應(yīng)的header參數(shù)：
1. 范圍較大時(shí)，在nginx的站點(diǎn)配置文件中添加如下：
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow_Credentials' 'true';
add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
2. 如果對(duì)謂詞有限制，添加如下即可：
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
return 204;
}
3. 配置項(xiàng)意義
（1）Access-Control-Allow-Origin：服務(wù)器默認(rèn)是不被允許跨域的。給Nginx服務(wù)器配置Access-Control-Allow-Origin *后，表示服務(wù)器可以接受所有的請(qǐng)求源（Origin）,即接受所有跨域的請(qǐng)求。
（2）Access-Control-Allow_Credentials：是服務(wù)端下發(fā)到客戶(hù)端的 response 中頭部字段，意義是允許客戶(hù)端攜帶驗(yàn)證信息，例如 cookie 之類(lèi)的。這樣客戶(hù)端在發(fā)起跨域請(qǐng)求的時(shí)候，不就可以攜帶允許的頭，還可以攜帶驗(yàn)證信息的頭。
（3）Access-Control-Allow-Headers ：是為了防止出現(xiàn)以下錯(cuò)誤，Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
這個(gè)錯(cuò)誤表示當(dāng)前請(qǐng)求Content-Type的值不被支持。其實(shí)是程序發(fā)起了"application/json"的類(lèi)型請(qǐng)求導(dǎo)致的。
（4）Access-Control-Allow-Methods ：允許跨域的謂詞（GET,POST,OPTIONS,PUT,DELETE,PATCH，常用的是前面三個(gè)）。是為了防止出現(xiàn)以下錯(cuò)誤：Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
（5）給OPTIONS 添加 204的返回，是為了處理在發(fā)送POST請(qǐng)求時(shí)Nginx依然拒絕訪(fǎng)問(wèn)的錯(cuò)誤;
發(fā)送"預(yù)檢請(qǐng)求"時(shí)，需要用到方法 OPTIONS ,所以服務(wù)器需要允許該方法。OPTIONS請(qǐng)求旨在發(fā)送一種“探測(cè)”請(qǐng)求以確定針對(duì)某個(gè)目標(biāo)地址的請(qǐng)求必須具有怎樣的約束.
4. 預(yù)檢請(qǐng)求
CROS,全稱(chēng)是跨域資源共享 (Cross-origin resource sharing)，是一個(gè)W3C標(biāo)準(zhǔn)；它的提出就是為了解決跨域請(qǐng)求的。
跨域資源共享(CORS)標(biāo)準(zhǔn)新增了一組 HTTP 首部字段，允許服務(wù)器聲明哪些源站有權(quán)限訪(fǎng)問(wèn)哪些資源。另外，規(guī)范要求，對(duì)那些可能對(duì)服務(wù)器數(shù)據(jù)產(chǎn)生副作用的HTTP 請(qǐng)求方法（特別是 GET 以外的 HTTP 請(qǐng)求，或者搭配某些 MIME 類(lèi)型的 POST 請(qǐng)求），瀏覽器必須首先使用 OPTIONS 方法發(fā)起一個(gè)預(yù)檢請(qǐng)求（preflight request），從而獲知服務(wù)端是否允許該跨域請(qǐng)求。服務(wù)器確認(rèn)允許之后，才發(fā)起實(shí)際的 HTTP 請(qǐng)求。在預(yù)檢請(qǐng)求的返回中，服務(wù)器端也可以通知客戶(hù)端，是否需要攜帶身份憑證（包括 Cookies 和 HTTP 認(rèn)證相關(guān)數(shù)據(jù)）。
Content-Type字段的類(lèi)型為application/json的請(qǐng)求就是上面所說(shuō)的搭配某些 MIME 類(lèi)型的 POST 請(qǐng)求,CORS規(guī)定，Content-Type不屬于以下MIME類(lèi)型的，都屬于預(yù)檢請(qǐng)求：
application/x-www-form-urlencoded
multipart/form-data
text/plain
因此application/json的請(qǐng)求 會(huì)在正式通信之前，增加一次"預(yù)檢"請(qǐng)求，這次"預(yù)檢"請(qǐng)求會(huì)帶上頭部信息 Access-Control-Request-Headers: Content-Type：
OPTIONS /api/test HTTP/1.1
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type
......
服務(wù)器回應(yīng)時(shí)，返回的頭部信息如果不包含Access-Control-Allow-Headers: Content-Type則表示不接受非默認(rèn)的的Content-Type。即出現(xiàn)以下錯(cuò)誤：Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
5 兩種請(qǐng)求
瀏覽器將CORS請(qǐng)求分成兩類(lèi)：簡(jiǎn)單請(qǐng)求（simple request）和非簡(jiǎn)單請(qǐng)求（not-so-simple request）。
（1）只要同時(shí)滿(mǎn)足以下兩大條件，就屬于簡(jiǎn)單請(qǐng)求。
a. 請(qǐng)求方法是以下三種方法之一：
HEAD
GET
POST
b.HTTP的頭信息不超出以下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三個(gè)值application/x-www-form-urlencoded、multipart/form-data、text/plain
(2)凡是不同時(shí)滿(mǎn)足上面兩個(gè)條件，就屬于非簡(jiǎn)單請(qǐng)求。
6請(qǐng)求流程
（1）簡(jiǎn)單
對(duì)于簡(jiǎn)單請(qǐng)求，瀏覽器直接發(fā)出CORS請(qǐng)求。具體來(lái)說(shuō)，就是在頭信息之中，增加一個(gè)Origin字段。
（2）非簡(jiǎn)單
非簡(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）。
瀏覽器先詢(xún)問(wèn)服務(wù)器，當(dāng)前網(wǎng)頁(yè)所在的域名是否在服務(wù)器的許可名單之中，以及可以使用哪些HTTP動(dòng)詞和頭信息字段。只有得到肯定答復(fù)，瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求，否則就報(bào)錯(cuò)。
