0. 背景
瀏覽器中展融，網(wǎng)站A的網(wǎng)絡(luò)請(qǐng)求訪問(wèn)網(wǎng)站A的資源（圖片寞射，HTTP請(qǐng)求）是很順暢的渔工，而想訪問(wèn)網(wǎng)站B的資源，就要面對(duì)跨域資源訪問(wèn)的問(wèn)題了桥温。面對(duì)跨域問(wèn)題引矩，有很多的解決方案，本文討論使用 CORS 來(lái)解決的方案侵浸。
本文結(jié)構(gòu)
1. 什么是跨域問(wèn)題旺韭，什么是同源策略
1.1 不同源則觸發(fā)一個(gè)跨域的HTTP請(qǐng)求
1.2 同源策略
1.3 源
2. CORS 概述
3. CORS 的控制場(chǎng)景
3.1 簡(jiǎn)單請(qǐng)求
3.2 預(yù)檢請(qǐng)求
3.3 附帶攜帶身份憑據(jù)的請(qǐng)求
3.4 響應(yīng)頭的額外暴露字段
3.5 預(yù)檢請(qǐng)求的緩存時(shí)長(zhǎng)
1. 什么是跨域問(wèn)題，什么是同源策略
跨域資源共享是由同源策略引發(fā)的掏觉，首先要了解同源策略区端。而要了解同源策略先要了解什么是“源”，下面我們層層展開(kāi)澳腹。
1.1 不同源則觸發(fā)一個(gè)跨域的HTTP請(qǐng)求:
在瀏覽器中织盼，當(dāng) “一個(gè)資源” 向 “與它所在的服務(wù)器不同的域、協(xié)議或端口” 請(qǐng)求一個(gè)資源時(shí)酱塔，該資源會(huì)發(fā)起一個(gè)跨域 HTTP 請(qǐng)求沥邻。
瀏覽器可能“限制發(fā)起跨域請(qǐng)求"，或者是 “可以發(fā)起跨域請(qǐng)求羊娃，但是返回結(jié)果被瀏覽器攔截”谋国。
出于安全原因，瀏覽器限制跨源HTTP請(qǐng)求迁沫。這意味著使用 Web應(yīng)用程序只能從加載應(yīng)用程序的同一個(gè)域請(qǐng)求HTTP資源芦瘾，除非響應(yīng)報(bào)文包含了正確CORS響應(yīng)頭。
1.2 同源策略
同源策略是一個(gè)重要的安全策略集畅，它用于限制一個(gè)origin的文檔或者它加載的腳本如何能與另一個(gè)源的資源進(jìn)行交互近弟。它能幫助阻隔惡意文檔，減少可能被攻擊的媒介挺智。
也就是說(shuō)祷愉，如果“源”相同，則運(yùn)行訪問(wèn)赦颇。如果不同二鳄，則被限制。我們繼續(xù)了解下什么是源媒怯。
1.3 源
Web內(nèi)容的源由它的URL的 協(xié)議订讼，主機(jī)(域名)和端口定義。
只有當(dāng)協(xié)議扇苞，主機(jī)和端口都匹配時(shí)欺殿，兩個(gè)對(duì)象被認(rèn)為具有相同的起源。而可以使用 CORS 解除這個(gè)限制鳖敷。
源由三部分組成：
- 協(xié)議
- 主機(jī)(域名)
- 端口
同源的例子
| 網(wǎng)址 | 說(shuō)明 |
|---|---|
| http://example.com/app2/index.html 脖苏，http://example.com/app1/index.html | 同源，以為都是http和域名相同 |
| http://Example.com:80 定踱，http://example.com | 同源棍潘，雖然寫(xiě)80端口，單實(shí)際上80是默認(rèn)端口（可以省略） |
不同源的例子
| 網(wǎng)址 | 說(shuō)明 |
|---|---|
| http://example.com/app1 崖媚，https://example.com/app2 | 不同源亦歉，因?yàn)椴煌膮f(xié)議： http 對(duì)比 https |
| http://example.com ， http://www.example.com 至扰， http://myapp.example.com | 不同源鳍徽，因?yàn)椴煌闹鳈C(jī)名 |
| http://example.com ， http://example.com:8080 | 不同源敢课，因?yàn)椴煌亩丝谔?hào)阶祭。 |
瀏覽器的同源策略提升了安全性，然而在業(yè)務(wù)需求中仍然需要需要“訪問(wèn)不同源的資源”直秆，于是提出了“CORS機(jī)制”濒募。
現(xiàn)代瀏覽器支持使用 CORS，以降低跨域 HTTP 請(qǐng)求所帶來(lái)的風(fēng)險(xiǎn)圾结。CORS 機(jī)制允許 Web應(yīng)用 進(jìn)行跨域訪問(wèn)控制瑰剃，從而使跨域數(shù)據(jù)傳輸?shù)靡园踩M(jìn)行。
2. CORS 概述
跨域資源共享 CORS 是一種機(jī)制筝野，它使用額外的 HTTP頭 來(lái)告訴瀏覽器 讓運(yùn)行在一個(gè) origin (domain) 上的Web應(yīng)用被準(zhǔn)許訪問(wèn)來(lái)自不同源服務(wù)器上的資源晌姚。
CORS 使用額外的請(qǐng)求頭來(lái)說(shuō)明訪問(wèn)是被允許的
跨域資源請(qǐng)求分為：
- （1）服務(wù)器通過(guò)請(qǐng)求頭來(lái)聲明“允許的源站粤剧，和允許的資源”
- （2）預(yù)檢請(qǐng)求
- （3）攜帶身份憑據(jù)（cookie等）的情形
跨域資源共享標(biāo)準(zhǔn)新增了一組 HTTP 請(qǐng)求頭字段，允許服務(wù)器聲明哪些源站通過(guò)瀏覽器有權(quán)限訪問(wèn)哪些資源挥唠。
對(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ù)器端也可以通知客戶端，是否需要攜帶身份憑證（包括 Cookies 和 HTTP 認(rèn)證相關(guān)數(shù)據(jù)）窿祥。
CORS請(qǐng)求失敗會(huì)產(chǎn)生錯(cuò)誤株憾，但是為了安全，在JavaScript代碼層面是無(wú)法獲知到底具體是哪里出了問(wèn)題壁肋。你只能查看瀏覽器的控制臺(tái)以得知具體是哪里出現(xiàn)了錯(cuò)誤号胚。
3. CORS 的控制場(chǎng)景
下面分幾個(gè)場(chǎng)景來(lái)說(shuō)明。
3.1 簡(jiǎn)單請(qǐng)求
簡(jiǎn)單請(qǐng)求不會(huì)觸發(fā) CORS 預(yù)檢請(qǐng)求浸遗。若請(qǐng)求滿足所有下述條件猫胁，則該請(qǐng)求可視為“簡(jiǎn)單請(qǐng)求”：
使用下列方法之一：
GET
HEAD
POST
HTTP的頭信息不超出以下幾種字段：
Accept
Accept-Language
Content-Language
Content-Type 的值僅限于下列三者之一：
text/plain
multipart/form-data
application/x-www-form-urlencoded
交互流程
（1）請(qǐng)求端：
當(dāng)發(fā)起一個(gè)跨域請(qǐng)求時(shí)，瀏覽器會(huì)自動(dòng)在請(qǐng)求頭中加入 Origin 字段跛锌，它是發(fā)起方所處于的域弃秆，表明了“來(lái)源”。
示例：請(qǐng)求中含有
Origin: http://foo.example
（2）服務(wù)端：
服務(wù)端根據(jù)“來(lái)源” 來(lái)決定處理方式髓帽，如果同意菠赚，則返回的消息頭中添加 Access-Control-Allow-Origin 字段。這個(gè)字段的值可以是“ * ”（表示任意的域名都允許）郑藏，或者是具體的域名地址衡查。
Access-Control-Allow-Origin: *
簡(jiǎn)單請(qǐng)求的跨域，通過(guò) Access-Control-Allow-Origin 請(qǐng)求頭的處理必盖。 如果在 請(qǐng)求頭中 包含了特殊自定義內(nèi)容拌牲，就需要 預(yù)檢請(qǐng)求 了。
3.2 預(yù)檢請(qǐng)求（preflight request）
“需預(yù)檢的請(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ù)期的影響失驶。
當(dāng)請(qǐng)求滿足下述任一條件時(shí)土居，即應(yīng)首先發(fā)送預(yù)檢請(qǐng)求：
（1）使用了下面任一 HTTP 方法：
PUT
DELETE
CONNECT
OPTIONS
TRACE
PATCH
（2）Content-Type 的值不屬于下列之一:
application/x-www-form-urlencoded
multipart/form-data
text/plain
（3）請(qǐng)求頭中包含的自定義請(qǐng)求頭
比如含有 Authorization, token 作為授權(quán)的字段
交互流程
示例假設(shè)：
假設(shè)我們自定義了一個(gè) 請(qǐng)求頭字段 “X-PINGOTHER” , 后續(xù)將在請(qǐng)求中攜帶這個(gè)請(qǐng)求頭字段。
(1) 請(qǐng)求端：
先發(fā)一個(gè) OPTION 的預(yù)檢請(qǐng)求，內(nèi)容有：
Origin 說(shuō)明了來(lái)源
Access-Control-Request-Method 說(shuō)明 下次將正式采用的方法擦耀。Access-Control-Request-Headers 說(shuō)明將采用的自定義header 字段名棉圈。
示例：
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type
(2) 服務(wù)端：
服務(wù)收到上面的請(qǐng)求后，根據(jù)自身情況來(lái)判定是否接收和處理埂奈。如果同意接受迄损，則返回的 響應(yīng)中包含下面幾個(gè)請(qǐng)求頭。
Access-Control-Allow-Origin 說(shuō)明了支持跨域的來(lái)源
Access-Control-Allow-Methods 說(shuō)明了支持的跨域方法
Access-Control-Allow-Headers 說(shuō)明了 將接受的自定義header字段名
Access-Control-Max-Age說(shuō)明了 預(yù)檢請(qǐng)求的結(jié)果能夠被緩存多久账磺，即在多久內(nèi)可以省略 預(yù)檢請(qǐng)求 。
Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
至此痊远，完成了 預(yù)檢垮抗。
(3) 請(qǐng)求端
預(yù)檢請(qǐng)求完成之后，發(fā)送實(shí)際請(qǐng)求碧聪，在這里 假設(shè)的自定義請(qǐng)求頭字段 X-PINGOTHER 冒版，就會(huì)被放在請(qǐng)求頭中了。示例：
X-PINGOTHER: pingpong
Origin: http://foo.example
(4) 服務(wù)端：
服務(wù)端 根據(jù)實(shí)際情況處理請(qǐng)求逞姿，仍然要返回 Access-Control-Allow-Origin 聲明辞嗡。
Access-Control-Allow-Origin: http://foo.example
是否需要發(fā)送 預(yù)檢請(qǐng)求，是瀏覽器根據(jù)規(guī)則自動(dòng)做出判斷滞造。預(yù)檢的過(guò)程和頭部字段也是瀏覽器自動(dòng)處理续室。如果在這個(gè)過(guò)程中發(fā)生了“拒絕”，那么谒养，在發(fā)送預(yù)檢請(qǐng)求后挺狰，就沒(méi)后后續(xù)了，瀏覽器會(huì) “不再發(fā)送實(shí)際的請(qǐng)求”买窟，或者 “丟失實(shí)際請(qǐng)求中的響應(yīng)”丰泊。
3.3 附帶攜帶身份憑據(jù)的請(qǐng)求
對(duì)于跨域 請(qǐng)求，瀏覽器不會(huì)發(fā)送身份憑證信息始绍。如果要發(fā)送憑證信息瞳购，需要設(shè)置 XMLHttpRequest 的某個(gè)特殊標(biāo)志位。
（1）請(qǐng)求端
在請(qǐng)求端中的 withCredentials 屬性則告訴瀏覽器“ 是否自動(dòng)在請(qǐng)求中攜帶 cookie 的值 ”
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
（2）服務(wù)端
服務(wù)端的請(qǐng)求頭中的 Access-Control-Allow-Credentials 說(shuō)明了是否接受憑據(jù)信息（比如cookie）亏推。
Access-Control-Allow-Credentials: true
如果 請(qǐng)求端包含了 withCredentials 学赛，而服務(wù)端未包含 Access-Control-Allow-Credentials，那么瀏覽器將丟失 這次 服務(wù)端的響應(yīng)內(nèi)容径簿，而不傳遞給請(qǐng)求的發(fā)送者罢屈。
附帶身份憑證的請(qǐng)求與通配符
對(duì)于附帶身份憑證的請(qǐng)求，服務(wù)器不得設(shè)置 Access-Control-Allow-Origin 的值為“”篇亭。
這是因?yàn)檎?qǐng)求的首部中攜帶了 Cookie 信息缠捌，如果 Access-Control-Allow-Origin 的值為“”，請(qǐng)求將會(huì)失敗
3.4 響應(yīng)頭的額外暴露字段
服務(wù)端通過(guò)響應(yīng)頭中的字段 Access-Control-Expose-Headers 來(lái)說(shuō)明額外暴露字段。
CORS請(qǐng)求時(shí)曼月，一般只能拿到6個(gè)基本字段：Cache-Control谊却、Content-Language、Content-Type哑芹、Expires炎辨、Last-Modified、Pragma聪姿。
如果想拿到其他字段碴萧，就必須在Access-Control-Expose-Headers里面指定。
3.5 預(yù)檢請(qǐng)求的緩存時(shí)長(zhǎng)
Access-Control-Max-Age 頭指定了預(yù)檢請(qǐng)求的結(jié)果能夠被緩存多久
Access-Control-Max-Age: <delta-seconds>
參數(shù) delta-seconds 表示 預(yù)檢請(qǐng)求的結(jié)果在多少秒內(nèi)有效末购。
END
