????????XMLHttpRequest遵守同源策略(same-origin policy)慎颗，導(dǎo)致我們?cè)诓煌吹那闆r下未必可以成功請(qǐng)求道服務(wù)器端的接口腹泌。在請(qǐng)求接口發(fā)生的過程中嘶卧，瀏覽器會(huì)根據(jù)需要發(fā)起一次預(yù)檢（也就是option請(qǐng)求），用來讓服務(wù)端返回允許的方法（如get凉袱、post）芥吟，被跨域訪問的Origin（來源或者域），還有是否需要Credentials(認(rèn)證信息)等专甩。
option請(qǐng)求：
????????由CORS引發(fā)的option請(qǐng)求钟鸵，什么是options請(qǐng)求呢？它是一種探測(cè)性的請(qǐng)求涤躲，通過這個(gè)方法棺耍，客戶端可以在采取具體資源請(qǐng)求之前，覺得采取什么樣的請(qǐng)求方式或者了解服務(wù)器性能种樱，黑客常見的辦法就是用option來試探蒙袍。
????????在ajax跨域請(qǐng)求時(shí)俊卤，如果請(qǐng)求的是json，或者一些其他‘非簡(jiǎn)單請(qǐng)求’左敌，此時(shí)需要提前發(fā)出一次options請(qǐng)求瘾蛋，用以檢查請(qǐng)求是否是可靠安全的俐镐，如果options獲得的回應(yīng)是拒絕性質(zhì)的矫限，比如404\403\500等http狀態(tài)，就會(huì)停止post佩抹、put等請(qǐng)求的發(fā)出叼风，或者報(bào)錯(cuò)。
????????跨域資源共享(CORS) 是一種機(jī)制棍苹，它使用額外的 HTTP 頭來告訴瀏覽器 讓運(yùn)行在一個(gè) origin (domain) 上的Web應(yīng)用被準(zhǔn)許訪問來自不同源服務(wù)器上的指定的資源无宿。當(dāng)一個(gè)資源從與該資源本身所在的服務(wù)器不同的域或端口請(qǐng)求一個(gè)資源時(shí)，資源會(huì)發(fā)起一個(gè)跨域 HTTP 請(qǐng)求枢里。
????????比如孽鸡，站點(diǎn) http://domain-a.com 的某 HTML 頁(yè)面通過的 src 請(qǐng)求 http://domain-b.com/image.jpg。網(wǎng)絡(luò)上的許多頁(yè)面都會(huì)加載來自不同域的CSS樣式表栏豺，圖像和腳本等資源彬碱。need-to-insert-img
????????出于安全原因，瀏覽器限制從腳本內(nèi)發(fā)起的跨源HTTP請(qǐng)求奥洼。 例如巷疼，XMLHttpRequest和Fetch API遵循同源策略。 這意味著使用這些API的Web應(yīng)用程序只能從加載應(yīng)用程序的同一個(gè)域請(qǐng)求HTTP資源灵奖，除非使用CORS頭文件嚼沿。
????????瀏覽器將CORS請(qǐng)求分為兩類：簡(jiǎn)單請(qǐng)求（simple request）和非簡(jiǎn)單請(qǐng)求（not-simple-request）,簡(jiǎn)單請(qǐng)求瀏覽器不會(huì)預(yù)檢，而非簡(jiǎn)單請(qǐng)求會(huì)預(yù)檢瓷患。
同時(shí)滿足下列三大條件骡尽，就屬于簡(jiǎn)單請(qǐng)求，否則屬于非簡(jiǎn)單請(qǐng)求
1.請(qǐng)求方式只能是：GET擅编、POST攀细、HEAD
2.HTTP請(qǐng)求頭限制這幾種字段：Accept、Accept-Language沙咏、Content-Language辨图、Content-Type、Last-Event-ID
3.Content-type只能戎辍：application/x-www-form-urlencoded故河、multipart/form-data、text/plain
如圖：常見的簡(jiǎn)單請(qǐng)求（只發(fā)出一次）
非簡(jiǎn)單請(qǐng)求（只發(fā)出兩次）
簡(jiǎn)單請(qǐng)求：
????????對(duì)于簡(jiǎn)單請(qǐng)求瀏覽器直接請(qǐng)求吆豹，會(huì)在請(qǐng)求頭信息中鱼的，增加一個(gè)origin字段理盆，來說明本次請(qǐng)求來自哪個(gè)源（協(xié)議+域名+端口）。服務(wù)器根據(jù)這個(gè)值凑阶，來決定是否同意該請(qǐng)求猿规，服務(wù)器返回的響應(yīng)會(huì)多幾個(gè)頭信息字段：
1.Access-Control-Allow-Origin：該字段是必須的，如果后臺(tái)將其設(shè)置為* 表示接受任意域名的請(qǐng)求宙橱，還可以指定域名姨俩。（表示允許訪問的外域請(qǐng)求）
2.Access-Control-Allow-Credentials：該字段可選，是個(gè)布爾值师郑，表示是否可以攜帶cookie环葵，（注意：如果Access-Control-Allow-Origin字段設(shè)置*，此字段設(shè)為true無效）
3.Access-Control-Allow-Headers：該字段可選宝冕，里面可以獲取Cache-Control张遭、Content-Type、Expires等地梨，如果想要拿到其他字段菊卷，就可以在這個(gè)字段中指定。比如圖中指定的GUAZISSO（表示實(shí)際請(qǐng)求中宝剖，用戶請(qǐng)求的頭部信息）
4.Access-Control-Expose-Headers：該字段可選洁闰。CORS請(qǐng)求時(shí)，XMLHttpRequest對(duì)象的getResponseHeader()方法只能拿到6個(gè)基本字段：Cache-Control诈闺、Content-Language渴庆、Content-Type、Expires雅镊、Last-Modified襟雷、Pragma。如果想拿到其他字段仁烹，就必須在Access-Control-Expose-Headers里面指定耸弄。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值卓缰。（首部字段用于預(yù)檢請(qǐng)求的響應(yīng)计呈。其指明了實(shí)際請(qǐng)求中允許攜帶的首部字段，允許用戶頭部攜帶（修改）哪些字段）
非簡(jiǎn)單請(qǐng)求：
? ??????對(duì)服務(wù)器有特殊要求的請(qǐng)求的征唬，例如請(qǐng)求方式是PUT或者DELETE捌显，或者自己配置請(qǐng)求頭要求修改Content-Type字段類型是application/json。都會(huì)在正式通信之前总寒，增加一次HTTP請(qǐng)求扶歪，稱之為預(yù)檢。瀏覽器會(huì)先詢問服務(wù)器摄闸，當(dāng)前網(wǎng)頁(yè)所在域名是否在服務(wù)器的許可名單之中善镰，服務(wù)器允許之后妹萨，瀏覽器會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求，否則會(huì)報(bào)錯(cuò)炫欺。
案例詳解：
? ? ? ? 如下圖：一個(gè)post請(qǐng)求乎完，里面設(shè)置了‘content-type’類型為application/json。是一個(gè)非簡(jiǎn)單請(qǐng)求品洛，瀏覽器發(fā)起了OPTIONS預(yù)請(qǐng)求树姨。
????????另外如下圖所示：（Access-Control-Allow-Methods：首部字段用于預(yù)檢請(qǐng)求的響應(yīng)。其指明了實(shí)際請(qǐng)求所允許使用的 HTTP 方法毫别。）所以說娃弓，這個(gè)接口只接受get請(qǐng)求；
????????Access-Control-Allow-Headers表示用戶想要修改‘a(chǎn)pi_token’和‘content-type’兩個(gè)請(qǐng)求頭信息岛宦；
????????Access-Control-Expose-Headers，里面表示了用戶只允許修改一個(gè)名為‘a(chǎn)pi_token’的頭部字段耍缴。
? ? ? ? 如下圖：在第二次實(shí)際請(qǐng)求當(dāng)中砾肺，用戶想要篡改content-type為json，但是未生效防嗡，請(qǐng)求出去的Request Payload竟然是get提交方式的字符串拼接变汪，說明用戶主動(dòng)修改的content-type未生效，修改這個(gè)請(qǐng)求頭沒有得到服務(wù)器認(rèn)可蚁趁。
正常json請(qǐng)求的Request Payload為：
? ??????倉(cāng)促成文裙盾，不當(dāng)之處，尚祈方家和讀者批評(píng)指正他嫡。
