1、瀏覽器的同源安全策略

沒錯，就是這家伙干的，瀏覽器只允許請求當(dāng)前域的資源，而對其他域的資源表示不信任。那怎么才算跨域呢？

1. 請求協(xié)議http,https的不同
2. 域domain的不同
3. 端口port的不同

好好好，大概就是這么回事啦，下面我們講2種中規(guī)中矩的辦法：CORS，JSONP
document.domain，window.name，web sockets就先別鬧了，腰不好 : )

2、CORS出來搞事了

這是W3C的大佬們搞出來的標(biāo)準(zhǔn)，全稱是"跨域資源共享"（Cross-origin resource sharing）。其實呢，這個大部分還是后端人員的工作。我們先來看看整個流程下，都發(fā)生了什么？

在此之前，需要知道簡單請求?復(fù)雜請求這兩個小朋友

1. 簡單請求：
   1): 請求方式只能是：head，get，post
   2): 請求頭允許的字段：Accept，Accept-Language，Content-Language，Last-Event-ID
Content-Type：application/x-www-form-urlencoded、multipart/form-data、text/plain 三選一

2.復(fù)雜請求：沒錯，不滿足上面的，都是我啦！

簡單請求:

瀏覽器：誒，你小子要跨域是吧，我得問問服務(wù)器大哥肯不肯！往請求頭添加origin亮一下牌面

有個奇怪現(xiàn)象，谷歌游覽器在非跨域情況下，也會發(fā)送origin字段

請求頭origin字段為當(dāng)前域

服務(wù)器：誒，你是誰，我來看看你的origin，嗯嗯，可以，符合我的要求，放行！順便告訴你，老夫的規(guī)矩！

其中，最重要的就是Access-Control-Allow-Origin，標(biāo)識允許哪個域的請求。當(dāng)然，如果服務(wù)器不通過，根本沒有這個字段，接著觸發(fā)XHR的onerror，再接著你就看到瀏覽器的提示xxx的服務(wù)器沒有響應(yīng)Access-Control-Allow-Origin字段

//指定允許其他域名訪問
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，動態(tài)設(shè)置），3是因為*不允許攜帶認(rèn)證頭和cookies
//是否允許后續(xù)請求攜帶認(rèn)證信息（cookies）,該值只能是true,否則不返回
'Access-Control-Allow-Credentials:true'

上面第一行說到的Access-Control-Allow-Origin有多種設(shè)置方法：

1. 設(shè)置*是最簡單粗暴的，但是服務(wù)器出于安全考慮，肯定不會這么干，而且，如果是*的話，游覽器將不會發(fā)送cookies，即使你的XHR設(shè)置了withCredentials
2. 指定域，如上圖中的http://172.20.0.206，一般的系統(tǒng)中間都有一個nginx，所以推薦這種
3. 動態(tài)設(shè)置為請求域，多人協(xié)作時，多個前端對接一個后臺，這樣很方便

withCredentials：表示XHR是否接收cookies和發(fā)送cookies，也就是說如果該值是false，響應(yīng)頭的Set-Cookie，瀏覽器也不會理，并且即使有目標(biāo)站點的cookies，瀏覽器也不會發(fā)送。

復(fù)雜請求:

最常見的情況，當(dāng)我們使用put和delete請求時，瀏覽器會先發(fā)送option（預(yù)檢）請求，不過有時候，你會發(fā)現(xiàn)并沒有，這是后面我們會講到緩存。

預(yù)檢請求

與簡單請求不同的是，option請求多了2個字段：
Access-Control-Request-Method：該次請求的請求方式
Access-Control-Request-Headers：該次請求的自定義請求頭字段

服務(wù)器檢查通過后，做出響應(yīng)：

//指定允許其他域名訪問
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，動態(tài)設(shè)置），3是因為*不允許攜帶認(rèn)證頭和cookies
//是否允許后續(xù)請求攜帶認(rèn)證信息（cookies）,該值只能是true,否則不返回
'Access-Control-Allow-Credentials:true'
//預(yù)檢結(jié)果緩存時間,也就是上面說到的緩存啦
'Access-Control-Max-Age: 1800'
//允許的請求類型
'Access-Control-Allow-Methods:GET,POST,PUT,POST'
//允許的請求頭字段
'Access-Control-Allow-Headers:x-requested-with,content-type'

這里有個注意點：Access-Control-Request-Method，Access-Control-Request-Headers返回的是滿足服務(wù)器要求的所有請求方式，請求頭，不限于該次請求，我一次性告訴你了，別TM問我了

3、大家好，我是渣渣輝，是兄dei就來...呸呸呸，我是JSONP

好啦，jsonp的原理：通過script標(biāo)簽引入一個js文件，這個js文件載入成功后會執(zhí)行我們在url參數(shù)中指定的函數(shù)，并且會把我們需要的json數(shù)據(jù)作為參數(shù)傳入，有種回調(diào)的味道！

例子：

<script src="http://example.com/data.php?callback=dosomething"></script><script type="text/javascript">function dosomething(jsondata){//處理獲得的json數(shù)據(jù)}
</script>

jquery用法

<script type="text/javascript">$.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){//處理獲得的json數(shù)據(jù)};
</script>

JSONP的優(yōu)缺點
優(yōu)點：它不像XMLHttpRequest對象實現(xiàn)的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運行，不需要XMLHttpRequest或ActiveX的支持；并且在請求完畢后可以通過調(diào)用callback的方式回傳結(jié)果。

缺點：它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進(jìn)行JavaScript調(diào)用的問題。

鏈接：https://www.jianshu.com/p/89a377c52b48
?