本文由何小蒙原創(chuàng)，如需轉(zhuǎn)載要注明來源驱富。

個人筆記墩新，自用辅甥，僅供參考庐船。

跨域

跨域是前端接口請求中比較重要的點，單獨開一篇記錄下茵臭。

同源策略

同源策略是一個重要的安全策略沽瘦，它用于限制一個origin的文檔或它加載的腳本如何能與另一個源的資源進行交互啦租。能夠減少惡意文檔煮岁，減少可能被攻擊媒介讥蔽。 如果兩個URL的協(xié)議涣易、域名、端口號都相同冶伞，就稱這兩個URL同源新症。

瀏覽器默認兩個不同的源之間是可以互相訪問資源和操作DOM的。兩個不同的源之間若是想要訪問資源或者操作DOM响禽，那么會有一套基礎(chǔ)的安全策略的制約徒爹，我們把這稱為同源策略。它的存在可以保護用戶隱私信息芋类，防止身份偽造瀑焦。

CORS

CORS的意思是跨資源共享，用自定義的HTTP頭部讓瀏覽器和服務(wù)器商量是否能溝通梗肝，不行瀏覽器_{（？此處確實是瀏覽器铺董，為什么不是服務(wù)器）}會駁回請求巫击。跨域請求默認情況下不會攜帶cookie精续。
_{意思是不行這個請求就是直接沒發(fā)到服務(wù)器嗎坝锰？}

// request headers
Origin: https://www.baidu.com

Origin是請求端告訴服務(wù)端請求來源，如上例重付，這個是來自百度的請求

// response headers
Access-Control-Allow-Origin: https://www.baidu.com

Access-Control-Allow-Origin 如果服務(wù)端覺得這個來源的請求可以接受顷级，就會返回與Origin相同的來源，如上例确垫。如果是公共資源可以返回 *

_{更新
1.確實是瀏覽器駁回跨域請求弓颈，服務(wù)器不會做處理
2.跨域請求可能會發(fā)送到服務(wù)器，也可能不會發(fā)送到服務(wù)器：
簡單請求（會到服務(wù)器删掀，服務(wù)器返回到瀏覽器后翔冀，瀏覽器隱藏返回值）
復(fù)雜請求（復(fù)雜請求會發(fā)預(yù)檢，預(yù)檢不通過就不會到服務(wù)器}

Preflighted Request

預(yù)檢請求披泪，Preflighted Request是一種驗證機制：用于驗證開發(fā)人員使用自定義頭部纤子、GET或POST之外的方法，以及不同類型的主體內(nèi)容款票。
發(fā)送預(yù)檢請求控硼，使用的是OPTION方法。

整個過程就是
請求端：我這有個麻煩的請求艾少，先用OPTION方法問下你能不能請求翱ㄇ？
服務(wù)器老弟：行姆钉，咱返回這些值告訴你说订。
a.不允許請求
請求端：喲抄瓦，不允許請求，請求結(jié)果緩存下陶冷，Access-Control-Max-Age時間內(nèi)不用重新問了钙姊。
b.允許請求
請求端：直接發(fā)送到服務(wù)端

請求端先發(fā)送這個，用OPTION方法

Origin: https://www.baidu.com
Access-Control-Request-Methods: POST 
Access-Control-Request-Headers: HeXM

Access-Control-Request-Methods是請求使用的方法
Access-Control-Request-Headers是自定義的頭部信息
服務(wù)端返回

Access-Control-Allow-Orgin: https://www.baidu.com
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: HXM
Access-Control-Max-Age: 1000000

Access-Control-Allow-Methods服務(wù)器允許請求的方法
Access-Control-Allow-Headers服務(wù)器允許請求的頭部
Access-Control-Max-Age應(yīng)該將此預(yù)檢請求緩存多少秒

OPTION.png

cookie

上文說cookie是跨域請求默認不會攜帶的埂伦，其實除了cookie煞额，HTTP認證，SSL證明也是默認不會帶上的沾谜。但是總有些情況需要攜帶膊毁，那咋辦呢？

通過如下設(shè)置基跑，我們就可以攜帶上述這些東西了
在請求端：

xhr.withCredentials = true

服務(wù)端HTTP頭部設(shè)置：

Access-Control-Allow-Origin: 此處不能設(shè)置為*婚温，必須要和請求同源
Access-Control-Allow-Credentials: true

如果服務(wù)端不設(shè)置Access-Control-Allow-Credentials，那么瀏覽器的返回值就是空媳否，status為0栅螟，走error()的處理方法。
預(yù)檢也可以發(fā)這個頭部篱竭，告訴服務(wù)器咱們可以帶cookie力图。
IE10以上的版本不支持withCredentials屬性。

JSONP

老實說掺逼，我覺得JSONP使用場景比較受限吃媒，因為它只接受GET請求，但實際業(yè)務(wù)場景只用GET請求的很少吕喘，基本至少都要用到POST吧赘那。而且如果跨的域名不安全，返回過來的信息可能也不安全氯质。不過既然有這個技術(shù)漓概，咱也簡單了解下。

JSONP不是語法病梢，是json的一種使用方法胃珍。

callback({"name": "HeXM"})

請求時指定回調(diào)函數(shù)的命名，如下例：
https://www.test.com/json?callback=handle
handle即為回調(diào)函數(shù)命名
然后數(shù)據(jù)會傳到這個回調(diào)函數(shù)蜓陌，接著前端在<script>里面處理即可觅彰。

本文參考：
同源策略（same origin policy）
跨域的請求在服務(wù)端會不會真正執(zhí)行？
ajax請求攜帶cookie和自定義請求頭header（跨域和同域）
http跨域時的options請求
MDN-Access-Control-Request-Headers

其他相關(guān)系列：
前端之a(chǎn)jax筆記（一）
前端之a(chǎn)jax筆記（二）