摘要：跨域的請(qǐng)求出于安全性的原因，瀏覽器會(huì)限制中的跨域請(qǐng)求?？缭垂蚕順?biāo)準(zhǔn)需要瀏覽器和服務(wù)端共同配合才能完成，目前瀏覽器廠商已經(jīng)可以將請(qǐng)求部分自動(dòng)完成，所以跨源資源訪(fǎng)問(wèn)的重點(diǎn)還是在于服務(wù)器端。指明預(yù)請(qǐng)求或者跨域請(qǐng)求的來(lái)源。

出于安全性的原因，瀏覽器會(huì)限制 Script 中的跨域請(qǐng)求。由于 XMLHttpRequest 遵循同源策略，所有使用 XMLHttpRequest 構(gòu)造 HTTP 請(qǐng)求的應(yīng)用只能訪(fǎng)問(wèn)自己的域名，如果需要構(gòu)造跨域的請(qǐng)求，那么開(kāi)發(fā)者需要配合瀏覽器做出一些允許跨域的配置。

W3C 應(yīng)用工作組推薦了一種跨資源共享的機(jī)制，這種機(jī)制讓 Web 應(yīng)用服務(wù)器能支持跨站訪(fǎng)問(wèn)控制，從而使得安全的進(jìn)行跨站數(shù)據(jù)傳輸成為可能，該機(jī)制通過(guò)幾種方式來(lái)對(duì)原有模式進(jìn)行了擴(kuò)展：

響應(yīng)的頭部應(yīng)該追加 Access-Control-Allow-Orign，用來(lái)表明哪些請(qǐng)求源被允許訪(fǎng)問(wèn)資源內(nèi)容

瀏覽器會(huì)對(duì)請(qǐng)求源和響應(yīng)中的值進(jìn)行匹配驗(yàn)證

對(duì)于跨域的請(qǐng)求，瀏覽器會(huì)預(yù)發(fā)送一個(gè)非簡(jiǎn)單方式的請(qǐng)求，來(lái)判斷給定資源是否準(zhǔn)備接受跨域資源訪(fǎng)問(wèn)

服務(wù)端應(yīng)用通過(guò)檢查請(qǐng)求頭部的 Orign 來(lái)判定請(qǐng)求是否跨域。

跨源資源共享標(biāo)準(zhǔn)通過(guò)新增一系列 HTTP 頭，讓服務(wù)器能聲明哪些來(lái)源可以通過(guò)瀏覽器訪(fǎng)問(wèn)該服務(wù)器上的資源。另外，對(duì)哪些會(huì)對(duì)服務(wù)器數(shù)據(jù)造成破壞性響應(yīng)的 HTTP 請(qǐng)求方法（特別是 GET 以外的 HTTP 方法，或者搭配某些 MIME 類(lèi)型的 POST 請(qǐng)求），標(biāo)準(zhǔn)強(qiáng)烈要求瀏覽器必須先以 OPTIONS 請(qǐng)求方式發(fā)送一個(gè)預(yù)請(qǐng)求（preflight request），從而獲取知服務(wù)器端對(duì)跨源請(qǐng)求所支持 HTTP 方法。在確認(rèn)服務(wù)器允許跨源請(qǐng)求的情況下，以實(shí)際的 HTTP 請(qǐng)求方法發(fā)送那個(gè)真正的請(qǐng)求。服務(wù)器端也可以通知客戶(hù)端，是不是需要隨同請(qǐng)求一起發(fā)送信用信息（包括 Cookies 和 HTTP 認(rèn)證相關(guān)數(shù)據(jù)）。

跨源共享標(biāo)準(zhǔn)需要瀏覽器和服務(wù)端共同配合才能完成，目前瀏覽器廠商已經(jīng)可以將請(qǐng)求部分自動(dòng)完成，所以跨源資源訪(fǎng)問(wèn)的重點(diǎn)還是在于服務(wù)器端。

下面列出一些標(biāo)準(zhǔn)中可用的響應(yīng)頭和請(qǐng)求頭。

Access-Control-Allow-Origin : 指明哪些請(qǐng)求源被允許訪(fǎng)問(wèn)資源，值可以為 "*"，"null"，或者單個(gè)源地址。

Access-Control-Allow-Credentials : 指明當(dāng)請(qǐng)求中省略 creadentials 標(biāo)識(shí)時(shí)響應(yīng)是否暴露。對(duì)于預(yù)請(qǐng)求來(lái)說(shuō)，它表明實(shí)際的請(qǐng)求中可以包含用戶(hù)憑證。

Access-Control-Expose-Headers : 指明哪些頭信息可以安全的暴露給 CORS API 規(guī)范的 API。

Access-Control-Max-Age : 指明預(yù)請(qǐng)求可以在預(yù)請(qǐng)求緩存中存放多久。

Access-Control-Allow-Methods : 對(duì)于預(yù)請(qǐng)求來(lái)說(shuō)，哪些請(qǐng)求方式可以用于實(shí)際的請(qǐng)求。

Access-Control-Allow-Headers : 對(duì)于預(yù)請(qǐng)求來(lái)說(shuō)，指明了哪些頭信息可以用于實(shí)際的請(qǐng)求中。

Origin : 指明預(yù)請(qǐng)求或者跨域請(qǐng)求的來(lái)源。

Access-Control-Request-Method : 對(duì)于預(yù)請(qǐng)求來(lái)說(shuō)，指明哪些預(yù)請(qǐng)求中的請(qǐng)求方式可以被用在實(shí)際的請(qǐng)求中。

Access-Control-Request-Headers : 指明預(yù)請(qǐng)求中的哪些頭信息可以用于實(shí)際的請(qǐng)求中。

Origin : 表明發(fā)送請(qǐng)求或預(yù)請(qǐng)求的來(lái)源。

Access-Control-Request-Method : 在發(fā)送預(yù)請(qǐng)求時(shí)帶該請(qǐng)求頭，表明實(shí)際的請(qǐng)求將使用的請(qǐng)求方式。

Access-Control-Request-Headers : 在發(fā)送預(yù)請(qǐng)求時(shí)帶有該請(qǐng)求頭，表明實(shí)際的請(qǐng)求將攜帶的請(qǐng)求頭。

在 Laravel 中允許跨域請(qǐng)求，我們可以構(gòu)建一個(gè)追加響應(yīng)的中間件，用來(lái)添加專(zhuān)門(mén)處理跨域的請(qǐng)求的響應(yīng)頭:

header("Access-Control-Allow-Origin", config("app.allow"));
        $response->header("Access-Control-Allow-Headers", "Origin, Content-Type, Cookie, Accept");
        $response->header("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, OPTIONS");
        $response->header("Access-Control-Allow-Credentials", "true");
        return $response;
  }

}

其中有以下需要注意的地方：

對(duì)于跨域訪(fǎng)問(wèn)并需要伴隨認(rèn)證信息的請(qǐng)求，需要在 XMLHttpRequest 實(shí)例中指定 withCredentials 為 true。

這個(gè)中間件你可以根據(jù)自己的需求進(jìn)行構(gòu)建，如果需要在請(qǐng)求中伴隨認(rèn)證信息（包含 cookie，session）那么你就需要指定 Access-Control-Allow-Credentials 為 true, 因?yàn)閷?duì)于預(yù)請(qǐng)求來(lái)說(shuō)如果你未指定該響應(yīng)頭，那么瀏覽器會(huì)直接忽略該響應(yīng)。

在響應(yīng)中指定 Access-Control-Allow-Credentials 為 true 時(shí)，Access-Control-Allow-Origin 不能指定為 *

后置中間件只有在正常響應(yīng)時(shí)才會(huì)被追加響應(yīng)頭，而如果出現(xiàn)異常，這時(shí)響應(yīng)是不會(huì)經(jīng)過(guò)中間件的。

PS: 歡迎關(guān)注簡(jiǎn)書(shū) Laravel 專(zhuān)題，也歡迎 Laravel 相關(guān)文章的投稿 :)，作者知識(shí)技能水平有限，如果你有更好的設(shè)計(jì)方案歡迎討論交流，如果有錯(cuò)誤的地方也請(qǐng)批評(píng)指正，在此表示感謝謝謝 :)