一.cors簡(jiǎn)介
概念:CORS需要瀏覽器和服務(wù)器同時(shí)支持.整個(gè)CORS通信過(guò)程，都是瀏覽器自動(dòng)完成，不需要用戶參與侠鳄。對(duì)于開(kāi)發(fā)者來(lái)說(shuō)吕粗，CORS通信與同源的AJAX通信沒(méi)有差別，代碼完全一樣笔诵。瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源，就會(huì)自動(dòng)添加一些附加的頭信息，有時(shí)還會(huì)多出一次附加的請(qǐng)求积暖，但用戶不會(huì)有感覺(jué)。
cors跨域分為兩種,1:簡(jiǎn)單請(qǐng)求;2:非簡(jiǎn)單請(qǐng)求
同時(shí)滿足兩個(gè)條件就是簡(jiǎn)單請(qǐng)求:
1:請(qǐng)求方法:head get post三種其一
2:http的頭信息不超過(guò)以下幾種字段:
accept
accept-language
content-language
last-event-id
content-type:application/x-www-form-urlencoded,multipart/form-data,text-plain
二.cors流程
1.簡(jiǎn)單請(qǐng)求
origin字段:
瀏覽器直接發(fā)出cors簡(jiǎn)單請(qǐng)求,在頭信息中,增加一個(gè)origin字段,服務(wù)器根據(jù)這個(gè)值決定是否同意這次請(qǐng)求.如果origin指定的源不在許可范圍內(nèi),服務(wù)器也會(huì)返回正常http回應(yīng)(測(cè)試結(jié)果發(fā)現(xiàn)返回值是200),瀏覽器發(fā)現(xiàn)返回的頭信息中沒(méi)有包含Access-Control-Allow-Origin字段,就會(huì)拋出一個(gè)錯(cuò)誤,被XMLHttpRequest的onerror回調(diào)函數(shù)捕獲,在控制臺(tái)顯示.如果origin指定的域名在許可范圍內(nèi),服務(wù)器返回就會(huì)多出Access-Control-Allow-Origin字段.
Access-Control-Allow-Origin:這個(gè)字段要么是一個(gè)確切的域名和端口(沒(méi)有端口默認(rèn)是80),表明只接受這個(gè)域名的跨域請(qǐng)求,要么是'*',表明接受任意域名的請(qǐng)求.
Access-Control-Allow-Credentials:表示請(qǐng)求是否允許發(fā)送cookie.如果要發(fā)送cookie到服務(wù)器,要在服務(wù)器端設(shè)置Access-Control-Allow-Credentials:true,另外,還要打開(kāi)xhr對(duì)象的withCredentials屬性xhr.withCredentials=true.需要注意的是,設(shè)置Access-Control-Allow-Credentials:true后,Access-Control-Allow-Origin不能設(shè)置為'*',必須指定明確的域名.同時(shí),cookie仍然遵循同源策略,只有用服務(wù)器域名設(shè)置的cookie才會(huì)上傳,其他域名的cookie并不會(huì)上傳,且原網(wǎng)頁(yè)代碼中的document.cookie也不能讀取服務(wù)器域名下的cookie.
2.非簡(jiǎn)單請(qǐng)求
非簡(jiǎn)單請(qǐng)求是那種對(duì)服務(wù)器有特殊要求的請(qǐng)求怪与，比如請(qǐng)求方法是PUT或DELETE夺刑，或者Content-Type字段的類型是application/json
非簡(jiǎn)單請(qǐng)求的CORS請(qǐng)求，會(huì)在正式通信之前分别，增加一次HTTP查詢請(qǐng)求遍愿，稱為"預(yù)檢"請(qǐng)求（preflight）。
瀏覽器先詢問(wèn)服務(wù)器耘斩，當(dāng)前網(wǎng)頁(yè)所在的域名是否在服務(wù)器的許可名單之中沼填，以及可以使用哪些HTTP動(dòng)詞和頭信息字段。只有得到肯定答復(fù)括授，瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求坞笙，否則就報(bào)錯(cuò)。
"預(yù)檢"請(qǐng)求用的請(qǐng)求方法是OPTIONS荚虚，表示這個(gè)請(qǐng)求是用來(lái)詢問(wèn)的羞海。頭信息里面，關(guān)鍵字段是Origin曲管，表示請(qǐng)求來(lái)自哪個(gè)源却邓。
除了Origin字段，"預(yù)檢"請(qǐng)求的頭信息包括兩個(gè)特殊字段院水。
（1）Access-Control-Request-Method
該字段是必須的腊徙，用來(lái)列出瀏覽器的CORS請(qǐng)求會(huì)用到哪些HTTP方法
（2）Access-Control-Request-Headers
該字段是一個(gè)逗號(hào)分隔的字符串，指定瀏覽器CORS請(qǐng)求會(huì)額外發(fā)送的頭信息字段
ajax({
url: url,
params: {},
method: 'get',
contentType: 'application/json',
success: function () {
console.log(123)
}
})
預(yù)檢請(qǐng)求的請(qǐng)求頭:
預(yù)檢請(qǐng)求的響應(yīng)頭:
其他cors請(qǐng)求的相關(guān)字段
(1) Access-Control-Allow-Methods
該字段必需檬某，它的值是逗號(hào)分隔的一個(gè)字符串撬腾，表明服務(wù)器支持的所有跨域請(qǐng)求的方法。注意恢恼，返回的是所有支持的方法民傻，而不單是瀏覽器請(qǐng)求的那個(gè)方法。這是為了避免多次"預(yù)檢"請(qǐng)求。
（2）Access-Control-Allow-Headers
如果瀏覽器請(qǐng)求包括Access-Control-Request-Headers字段漓踢，則Access-Control-Allow-Headers字段是必需的牵署。它也是一個(gè)逗號(hào)分隔的字符串，表明服務(wù)器支持的所有頭信息字段喧半，不限于瀏覽器在"預(yù)檢"中請(qǐng)求的字段奴迅。
（3）Access-Control-Allow-Credentials
該字段與簡(jiǎn)單請(qǐng)求時(shí)的含義相同。
（4）Access-Control-Max-Age
該字段可選挺据，用來(lái)指定本次預(yù)檢請(qǐng)求的有效期取具，單位為秒。上面結(jié)果中扁耐，有效期是20天（1728000秒）暇检，即允許緩存該條回應(yīng)1728000秒（即20天），在此期間婉称，不用發(fā)出另一條預(yù)檢請(qǐng)求块仆。
