原文鏈接：http://itoss.me/2016/12/31/說說跨域那些事兒/

作者寄語：首先糾正一個誤區(qū)，跨域并非瀏覽器限制了發(fā)起跨站請求的這種能力，恰恰相反，我們可以發(fā)出請求，服務(wù)端也可以接收到請求并正常返回數(shù)據(jù)，只不過在返回之后瀏覽器會阻止非同源數(shù)據(jù)（response），從而在控制臺打出一系列報錯信息。 兼容性查找

文章中會涉及一系列兼容性的圖解（mdn & can i use）和一些專有名詞（mdn），可以通過兩個渠道來查看

Can I Use MDN 什么是跨域

定義就不說了，從字面也可以看其含義，首先我們認(rèn)識下哪些情況屬于跨域，可以分為以下幾點：

協(xié)議不同，如http, https； 端口不同； 主域相同，子域不同； 主域不同； ip地址和域名之間也算是跨域，瀏覽器不會自動做ip域名的映射； 解決方案

document.domain window.name jsonp postMessage cors document.domain

關(guān)鍵點 跨域分為兩種，一種xhr不能訪問不同源的文檔，另一種是不同window之間不能進(jìn)行交互操作; document.domain主要是解決第二種情況，且只能適用于主域相同子域不同的情況； document.domain的設(shè)置是有限制的，我們只能把document.domain設(shè)置成自身或更高一級的父域，且主域必須相同。例如：a.b.example.com中某個文檔的document.domain可以設(shè)成a.b.example.com、b.example.com 、example.com中的任意一個，但是不可以設(shè)成c.a.b.example.com，因為這是當(dāng)前域的子域，也不可以設(shè)成baidu.com，因為主域已經(jīng)不相同了。 兼容性：所有瀏覽器都支持； 優(yōu)點： 可以實現(xiàn)不同window之間的相互訪問和操作； 缺點： 只適用于父子window之間的通信，不能用于xhr； 只能在主域相同且子域不同的情況下使用； 使用方式 a（當(dāng)前頁面或父頁面）頁面中加入document.domain = ‘example.com’; b（當(dāng)前頁面或子頁面）頁面中加入document.domain = ‘example.com’; a頁面訪問b頁面里面的數(shù)據(jù)或者方法； window.name

關(guān)鍵點：window.name在頁面的生命周期里共享一個window.name; 兼容性：所有瀏覽器都支持； 優(yōu)點： 最簡單的利用了瀏覽器的特性來做到不同域之間的數(shù)據(jù)傳遞； 不需要前端和后端的特殊配制； 缺點： 大小限制：window.name最大size是2M左右，不同瀏覽器中會有不同約定； 安全性：當(dāng)前頁面所有window都可以修改，很不安全； 數(shù)據(jù)類型：傳遞數(shù)據(jù)只能限于字符串，如果是對象或者其他會自動被轉(zhuǎn)化為字符串，如下； window.name非字符串測試 使用方式：修改window.name的值即可； jsonp

關(guān)鍵點：瀏覽器對XHR做了同源策略，但并沒有將這種方式延續(xù)到script上（其實還有iframe，img等），從而可以利用動態(tài)script標(biāo)簽技術(shù)來做到跨域請求的作用。至于為什么會這樣設(shè)計，本人也不太清楚，有可能是歷史遺跡（漏洞），有可能是某些方面的技術(shù)瓶頸，也有可能是為了滿足某些需求專門定制的，總之這項技術(shù)方案我們過去可以用，現(xiàn)在可以用就ok，至于將來應(yīng)該也是會存在的，畢竟現(xiàn)在已經(jīng)應(yīng)用在很多家站點上，就算會廢棄，也會有一段時間迭代。 兼容性：所有瀏覽器都兼容這種方式； 優(yōu)點：很明顯前端可以很輕松的做到跨域請求； 缺點 只能通過GET方式請求，一方面是參數(shù)長度有限制，二是安全性比較差； 后端需要知道前端的cb是什么樣的結(jié)構(gòu)，主要在參數(shù)和回調(diào)名； 后端需要進(jìn)行參數(shù)和cb的拼接然后才能執(zhí)行； 使用方式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /* 前端生成script標(biāo)簽，并將src中傳入需要執(zhí)行的callback */

/* 后端接到參數(shù)后給callback加入?yún)?shù)并執(zhí)行 */