摘要：常用跨域方法總結(jié)上篇文章介紹了幾種常用的跨域方法常用跨域方法總結(jié)，本片為上一篇的補(bǔ)充，對(duì)比較重要的詳細(xì)介紹。出于安全原因，從腳本內(nèi)發(fā)起的跨源請(qǐng)求會(huì)受到一定限制。當(dāng)開發(fā)者使用對(duì)象發(fā)起跨域請(qǐng)求時(shí)，它們已經(jīng)被設(shè)置就緒。

上篇文章介紹了幾種常用的跨域方法：常用跨域方法總結(jié)，本片為上一篇的補(bǔ)充，對(duì)比較重要的Cross Origin Resource Sharing詳細(xì)介紹。

出于安全原因，從腳本內(nèi)發(fā)起的跨源HTTP請(qǐng)求會(huì)受到一定限制。 例如，XMLHttpRequest和Fetch API遵循同源策略。 這意味著使用這些API的Web應(yīng)用程序只能從加載應(yīng)用程序的同一個(gè)域請(qǐng)求HTTP資源，除非使用CORS頭文件。
跨域資源共享標(biāo)準(zhǔn)新增了一組 HTTP 首部字段，允許服務(wù)器聲明哪些源站有權(quán)限訪問哪些資源。另外，規(guī)范要求，對(duì)那些可能對(duì)服務(wù)器數(shù)據(jù)產(chǎn)生副作用的 HTTP 請(qǐng)求方法（特別是 GET 以外的 HTTP 請(qǐng)求，或者搭配某些 MIME 類型的 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ù)器端也可以通知客戶端，是否需要攜帶身份憑證（包括 Cookies 和 HTTP 認(rèn)證相關(guān)數(shù)據(jù)）。

若要利用CORS來進(jìn)行跨域獲取資源，還需要服務(wù)端的配合。
這里分為兩種場(chǎng)景：簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求

什么樣的請(qǐng)求才屬于簡(jiǎn)單請(qǐng)求呢，讓我們先來看MDN的一段定義

必須使用下列方法中的一種：

GET

HEAD

POST

請(qǐng)求首部字段不能超出以下幾種

Accept

Accept-Language

Content-Language

Content-Type （需要注意額外的限制）

DPR

Downlink

Save-Data

Viewport-Width

Width

Content-Type 的值僅限于下列三者之一：

text/plain

multipart/form-data

application/x-www-form-urlencoded

請(qǐng)求中的任意XMLHttpRequestUpload 對(duì)象均沒有注冊(cè)任何事件監(jiān)聽器；XMLHttpRequestUpload 對(duì)象可以使用 XMLHttpRequest.upload 屬性訪問。

請(qǐng)求中沒有使用 ReadableStream 對(duì)象。

同時(shí)滿足以上5種條件，則可以視為簡(jiǎn)單請(qǐng)求。
先跑例子吧。
首先上服務(wù)端代碼：

var http = require("http");
http.createServer(function (req, res) {
  res.setHeader("Access-Control-Allow-Origin","*");
  res.end(JSON.stringify({"success":true,msg:"今天，我就是要用cors來跨域"+Math.random()}));
}).listen(8080)

很簡(jiǎn)單有沒有，
Access-Control-Allow-Origin:限制發(fā)起跨域請(qǐng)求的來源，*表示不限制
（請(qǐng)求首部字段下文詳細(xì)介紹）
前端代碼：

結(jié)果肯定是請(qǐng)求成功啦

簡(jiǎn)單來說吧，不符合簡(jiǎn)單請(qǐng)求的都是非簡(jiǎn)單請(qǐng)求（怎么感覺這么大白話呢- -）詳見CORS

與前述簡(jiǎn)單請(qǐng)求不同，“非簡(jiǎn)單請(qǐng)求”要求必須首先使用 OPTIONS   方法發(fā)起一個(gè)預(yù)檢請(qǐng)求到服務(wù)器，以獲知服務(wù)器是否允許該實(shí)際請(qǐng)求。"預(yù)檢請(qǐng)求“的使用，可以避免跨域請(qǐng)求對(duì)服務(wù)器的用戶數(shù)據(jù)產(chǎn)生未預(yù)期的影響。

還是先上代碼
服務(wù)端：

var http = require("http");
http.createServer(function (req, res) {
  res.setHeader("Access-Control-Allow-Origin","*");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
  res.setHeader("Access-Control-Allow-Methods","PUT,GET,POST,DELETE,OPTIONS");
  res.end(JSON.stringify({"success":true,msg:"今天，我就是要用cors來跨域"+Math.random()}));
}).listen(8080)
console.log("正在監(jiān)聽8080")

Access-Control-Allow-Headers::預(yù)檢請(qǐng)求響應(yīng)的首部字段定義了實(shí)際請(qǐng)求中允許攜帶的額外的首部字段。
Access-Control-Allow-Methods:預(yù)檢請(qǐng)求響應(yīng)的首部字段定義了實(shí)際請(qǐng)求所允許使用的 HTTP 方法。（筆者做實(shí)驗(yàn)的遇到了一個(gè)小插曲，simple method會(huì)不受此限制，詳見為什么 Access-Control-Allow-Methods 不起作用？）
前端

結(jié)果肯定也是請(qǐng)求成功啦。

這里有一點(diǎn)要注意的地方，這里還是說一下吧

一般而言，對(duì)于跨域 XMLHttpRequest 或 Fetch 請(qǐng)求，瀏覽器不會(huì)發(fā)送身份憑證信息。如果要發(fā)送憑證信息，需要設(shè)置 XMLHttpRequest 的某個(gè)特殊標(biāo)志位。

也就是前端請(qǐng)求的時(shí)候：xhr.withCredentials = true

對(duì)于附帶身份憑證的請(qǐng)求，服務(wù)器不得設(shè)置 Access-Control-Allow-Origin 的值為“”。若請(qǐng)求的首部中攜帶了 Cookie 信息，如果 Access-Control-Allow-Origin 的值為“”，請(qǐng)求將會(huì)失敗。

這塊內(nèi)容MDN已經(jīng)很詳細(xì)了，為了方便閱讀，筆者還是整理過來了。

請(qǐng)注意，這些首部字段無須手動(dòng)設(shè)置。 當(dāng)開發(fā)者使用 XMLHttpRequest 對(duì)象發(fā)起跨域請(qǐng)求時(shí)，它們已經(jīng)被設(shè)置就緒。
Origin首部字段表明預(yù)檢請(qǐng)求或?qū)嶋H請(qǐng)求的源站。(注意，不管是否為跨域請(qǐng)求，ORIGIN 字段總是被發(fā)送。)
Access-Control-Request-Method,用于預(yù)檢請(qǐng)求,表示實(shí)際請(qǐng)求的方法
Access-Control-Request-Headers,用于預(yù)檢請(qǐng)求,表示實(shí)際請(qǐng)求中添加的額外的首部字段

Access-Control-Allow-Method,預(yù)檢請(qǐng)求的響應(yīng)，表示允許的接下來的實(shí)際請(qǐng)求的方法。（筆者做實(shí)驗(yàn)的遇到了一個(gè)小插曲，simple method會(huì)不受此限制，詳見為什么 Access-Control-Allow-Methods 不起作用？）
Access-Control-Allow-Origin,指定了允許訪問該資源的外域 URI。對(duì)于不需要攜帶身份憑證的請(qǐng)求，服務(wù)器可以指定該字段的值為通配符，表示允許來自所有域的請(qǐng)求。
Access-Control-Allow-Credentials,當(dāng)瀏覽器(比如xhr)的credentials設(shè)置為true時(shí)是否允許瀏覽器讀取response的內(nèi)容。當(dāng)用在對(duì)preflight預(yù)檢測(cè)請(qǐng)求的響應(yīng)中時(shí)，它指定了實(shí)際的請(qǐng)求是否可以使用credentials(如果請(qǐng)求credentials為true時(shí)，該響應(yīng)首部字段需要設(shè)置為true)。
Access-Control-Allow-Headers,預(yù)檢請(qǐng)求的響應(yīng)，表示允許的接下來的實(shí)際請(qǐng)求的額外的首部字段。預(yù)檢請(qǐng)求的響應(yīng)。其指明了實(shí)際請(qǐng)求中允許攜帶的首部字段。
Access-Control-Expose-Headers,在跨域訪問時(shí)，XMLHttpRequest對(duì)象的getResponseHeader()方法只能拿到一些最基本的響應(yīng)頭，Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要訪問其他頭，則需要服務(wù)器設(shè)置本響應(yīng)頭。
Access-Control-Max-Age:指定了預(yù)檢請(qǐng)求的結(jié)果能夠被緩存多久

到這里筆者對(duì)跨域算是比較熟悉了，感謝各位的閱讀，如有不對(duì)的地方，歡迎大家批評(píng)指正。
還有，最好是對(duì)每個(gè)例子都有實(shí)際運(yùn)行理解更深刻哦。

HTTP訪問控制（CORS）