Section1勺择、為什么要跨域创南？
自古以來（1995年起），為了用戶的信息安全省核，瀏覽器就引入了同源策略稿辙。那么同源策略是如何保證用戶的信息安全的呢？
栗子1：如果沒有同源策略气忠，你打開了你的銀行賬戶頁面A邻储，又打開了另一個(gè)不相關(guān)的頁面B赋咽，這時(shí)候如果B是惡意網(wǎng)站，B可以通過Javascript輕松訪問和修改A頁面中的內(nèi)容吨娜。
栗子2：現(xiàn)在我們廣泛的使用cookie來維護(hù)用戶的登錄狀態(tài)脓匿，而如果沒有同源策略，這些cookie信息就會(huì)泄露宦赠，其他網(wǎng)站就可以冒充這個(gè)登錄用戶陪毡。
由此可以看出，同源策略確實(shí)是必不可少的勾扭，那么它會(huì)帶來哪些限制呢毡琉？
1、Cookie尺借、LocalStorage和IndexDB無法讀取。
2精拟、DOM無法獲得燎斩。
3、AJAX請(qǐng)求不能發(fā)送蜂绎。
有時(shí)候我們需要突破上述限制栅表，就需要用跨域的方法來解決。
Section2师枣、跨域是什么怪瓶？
什么叫做不同的域？比如：
http://www.a.com:8000/a.js協(xié)議（http）践美、域名（www.a.com）洗贰、端口（8000）三者中有一個(gè)不同就叫不同的域。
跨域就是不同的域間相互訪問時(shí)使用某些方法來突破上述限制陨倡。
【注意：協(xié)議或者端口的不同敛滋，只能通過后臺(tái)來解決⌒烁铮】
Section3绎晃、怎么跨域？
一杂曲、解決Section1中提到的1庶艾、2兩點(diǎn)限制：
1.Cookie、LocalStorage和IndexDB無法讀取擎勘。2.DOM無法獲得咱揍。
方法1、通過document.domain跨子域
【適用范圍：（1）兩個(gè)域只是子域不同棚饵；（2）只適用于iframe窗口與父窗口之間互相獲取cookie和DOM節(jié)點(diǎn)述召，不能突破LocalStorage和IndexDB的限制朱转。】
當(dāng)兩個(gè)不同的域只是子域不同時(shí)积暖，可以通過把document.domain設(shè)置為他們共同的父域來解決藤为。
栗子：
A: [http://www.example.com/a.html(http://www.example.com/a.html)B: http://example.com/b.html當(dāng)A、B想要獲取對(duì)方的**cookie或者DOM節(jié)點(diǎn)時(shí)可以設(shè)置:document.domain='example.com';來解決夺刑。
這時(shí)A網(wǎng)頁通過腳本設(shè)置:document.cookie = "testA=hello";B網(wǎng)頁就可以拿到這個(gè)cookie：
var aCookie = document.cookie;
方法2缅疟、通過window.name跨域
【適用范圍：（1）可以是兩個(gè)完全不同源的域；（2）同一個(gè)窗口內(nèi)：即同一個(gè)標(biāo)簽頁內(nèi)先后打開的窗口遍愿〈嬉】
pre-condition：
window.name屬性有個(gè)特征：即在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁面都是共享一個(gè)window.name的，每個(gè)頁面對(duì)window.name都有讀寫的權(quán)限沼填，window.name是持久存在一個(gè)窗口載入過的所有頁面中的桅咆。
基于這個(gè)思想，我們可以在某個(gè)頁面設(shè)置好 window.name 的值坞笙，然后在本標(biāo)簽頁內(nèi)跳轉(zhuǎn)到另外一個(gè)域下的頁面岩饼。在這個(gè)頁面中就可以獲取到我們剛剛設(shè)置的 window.name 了。
結(jié)合iframe還有更高級(jí)的用法：
父窗口先打開一個(gè)與自己不同源的子窗口薛夜，在這個(gè)子窗口里設(shè)置：
window.name = data;
然后讓子窗口跳轉(zhuǎn)到一個(gè)與父窗口同域的網(wǎng)址：
location='http://www.parent.com/a.html';
這時(shí)籍茧，因?yàn)橥虿⑶彝淮翱趙indow.name是不變的，所以父窗口可以獲取到子窗口下的window.name梯澜。
var data = document.getElementById('myFrame').contentWindow.name;
優(yōu)點(diǎn)：window.name容量很大寞冯，可以放置非常長(zhǎng)的字符串；缺點(diǎn)：必須監(jiān)聽子窗口window.name屬性的變化晚伙，影響網(wǎng)頁性能吮龄。
方法3、使用HTML5的window.postMessage跨域
window.postMessage(message,targetOrigin) 方法是html5新引進(jìn)的特性咆疗，可以使用它來向其它的window對(duì)象發(fā)送消息螟蝙，無論這個(gè)window對(duì)象是屬于同源或不同源，目前IE8+民傻、FireFox胰默、Chrome、Opera等瀏覽器都已經(jīng)支持window.postMessage方法漓踢。
otherWindow.postMessage(message, targetOrigin);
otherWindow:接受消息頁面的window的引用牵署。可以是頁面中iframe的contentWindow屬性喧半；window.open的返回值奴迅；通過name或下標(biāo)從window.frames取到的值。
message:所要發(fā)送的數(shù)據(jù)，string類型取具。
targetOrigin:用于限制otherWindow脖隶，*表示不做限制。
栗子1：
在父頁面中嵌入子頁面暇检，通過postMessage發(fā)送數(shù)據(jù)产阱。parent.com/index.html中的代碼：
<iframe id="ifr" src="child.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
var ifr = document.getElementById('ifr');
var targetOrigin = 'http://child.com';
// 若寫成'http://child.com/c/proxy.html'效果一樣
// 若寫成'http://c.com'就不會(huì)執(zhí)行postMessage了
ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>
在子頁面中通過message事件監(jiān)聽父頁面發(fā)送來的消息并顯示。child.com/index.html中的代碼：
<script type="text/javascript">
window.addEventListener('message', function(event){
// 通過origin屬性判斷消息來源地址
if (event.origin == 'http://parent.com') {
alert(event.data); // 彈出"I was there!"
alert(event.source);
// 對(duì)parent.com块仆、index.html中window對(duì)象的引用
// 但由于同源策略构蹬，這里event.source不可以訪問window對(duì)象
}
}, false);
</script>
栗子2：
假設(shè)在a.html里嵌套個(gè)
<iframe src="http://www.child.com/b.html" frameborder="0"></iframe>
在這兩個(gè)頁面里互相通信
a.html
window.onload = function() {
window.addEventListener("message", function(e) {
alert(e.data);
});
window.frames[0].postMessage("b data", "http://www.child.com/b.html");
}
b.html
window.onload = function() {
window.addEventListener("message", function(e) {
alert(e.data);
});
window.parent.postMessage("a data", "http://www.parent.com/a.html");
}
這樣打開a頁面，首先監(jiān)聽到了b.html通過postMessage傳來的消息悔据，就先彈出 a data庄敛，然后a通過postMessage傳遞消息給子頁面b.html，這時(shí)會(huì)彈出 b data科汗。
二藻烤、解決第3點(diǎn)限制：
3）AJAX請(qǐng)求不能發(fā)送。
方法4头滔、通過JSONP跨域
【適用范圍：（1）可以是兩個(gè)完全不同源的域怖亭；（2）只支持HTTP請(qǐng)求中的GET方式；（3）老式瀏覽器全部支持拙毫；（4）需要服務(wù)端支持】
JSONP(JSON with Padding)是資料格式JSON的一種使用模式依许，可以讓網(wǎng)頁從別的網(wǎng)域要資料棺禾。
由于瀏覽器的同源策略缀蹄，在網(wǎng)頁端出現(xiàn)了這個(gè)“跨域”的問題，然而我們發(fā)現(xiàn)膘婶，所有的 src 屬性并沒有受到相關(guān)的限制缺前，比如 img / script 等。
JSONP 的原理就要從 script 說起悬襟。script 可以引用其他域的腳本文件衅码，比如這樣：
a.html
...
<script>
function callback(data) {
console.log(data.url)
}
</script>
<script src='b.js'></script>
...
b.js
callback({url: 'http://www.rccoder.net'})
這就類似于JSONP的原理了。
JSONP的基本思想是：先在網(wǎng)頁上添加一個(gè)script標(biāo)簽脊岳，設(shè)置這個(gè)script標(biāo)簽的src屬性用于向服務(wù)器請(qǐng)求JSON數(shù)據(jù) 逝段，需要注意的是，src屬性的查詢字符串一定要加一個(gè)callback函數(shù)割捅，用來指定回調(diào)函數(shù)的名字 奶躯。而這個(gè)函數(shù)是在資源加載之前就已經(jīng)在前端定義好的，這個(gè)函數(shù)接受一個(gè)參數(shù)并利用這個(gè)參數(shù)做一些事情亿驾。向服務(wù)器請(qǐng)求后嘹黔，服務(wù)器會(huì)將JSON數(shù)據(jù)放在一個(gè)指定名字的回調(diào)函數(shù)里作為其參數(shù)傳回來。這時(shí)莫瞬，因?yàn)楹瘮?shù)已經(jīng)在前端定義好了儡蔓，所以會(huì)直接調(diào)用郭蕉。
一個(gè)栗子：
function addScriptTag(src) {
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function () {
addScriptTag('http://example.com/ip?callback=foo');//請(qǐng)求服務(wù)器數(shù)據(jù)并規(guī)定回調(diào)函數(shù)為foo
}
function foo(data) {
console.log('Your public IP address is: ' + data.ip);
};
向服務(wù)器example.com請(qǐng)求數(shù)據(jù)，這時(shí)服務(wù)器會(huì)先生成JSON數(shù)據(jù)喂江，這里是{"ip": "8.8.8.8"}召锈，然后以JS語法的方式生成一個(gè)函數(shù)，函數(shù)名就是傳遞上來的callback參數(shù)的值开呐，最后將數(shù)據(jù)放在函數(shù)的參數(shù)中返回：
foo({
"ip": "8.8.8.8"
});
客戶端解析script標(biāo)簽烟勋，執(zhí)行返回的JS代碼，調(diào)用函數(shù)筐付。
方法5卵惦、通過CORS跨域
【適用范圍：（1）可以是兩個(gè)完全不同源的域；（2）支持所有類型的HTTP請(qǐng)求瓦戚；（3）被絕大多數(shù)現(xiàn)代瀏覽器支持沮尿，老式瀏覽器不支持；（4）需要服務(wù)端支持】
對(duì)于前端開發(fā)者來說较解，跨域的CORS通信與同源的AJAX通信沒有差別畜疾，代碼完全一樣。因此印衔，實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器啡捶。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信奸焙。
瀏覽器將CORS請(qǐng)求分成兩類：簡(jiǎn)單請(qǐng)求（simple request）和非簡(jiǎn)單請(qǐng)求（not-so-simple request）瞎暑。
只要同時(shí)滿足以下兩大條件，就屬于簡(jiǎn)單請(qǐng)求与帆。
（1) 請(qǐng)求方法是以下三種方法之一：
HEAD
GET
POST
（2）HTTP的頭信息不超出以下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三個(gè)值application/x-www-form-urlencoded了赌、multipart/form-data、text/plain
凡是不同時(shí)滿足上面兩個(gè)條件玄糟，就屬于非簡(jiǎn)單請(qǐng)求勿她。瀏覽器對(duì)這兩種請(qǐng)求的處理，是不一樣的阵翎。
簡(jiǎn)單請(qǐng)求：
下面是一次跨源AJAX請(qǐng)求逢并，瀏覽器發(fā)現(xiàn)它是簡(jiǎn)單請(qǐng)求，就會(huì)直接在頭信息中加一個(gè)origin字段：
GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
服務(wù)器收到這條請(qǐng)求郭卫，如果這個(gè)origin指定的源在許可范圍內(nèi)砍聊，那么服務(wù)器返回的頭信息中會(huì)包含Access-Control-Allow-Origin字段，值與origin的值相同箱沦，以及其他幾個(gè)相關(guān)字段：
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Access-Control-Allow-Origin: 該字段是必須的辩恼。要么與origin相同，要么為*
Access-Control-Allow-Credentials: 該字段可選。設(shè)為true表示服務(wù)器允許發(fā)送cookie
Access-Control-Expose-Headers: 該字段可選灶伊。CORS請(qǐng)求時(shí)疆前，XMLHttpRequest對(duì)象的getResponseHeader()方法只能拿到6個(gè)基本字段：Cache-Control、Content-Language聘萨、Content-Type竹椒、Expires、Last-Modified米辐、Pragma胸完。如果想拿到其他字段，就必須在Access-Control-Expose-Headers里面指定翘贮。上面的例子指定赊窥，getResponseHeader('FooBar')可以返回FooBar字段的值。
想要發(fā)送cookie狸页，這里還有兩點(diǎn)需要額外注意：
1）開發(fā)者必須在AJAX請(qǐng)求中打開withCredentials屬性锨能。
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
否則即使服務(wù)器允許，客戶端也不會(huì)發(fā)送芍耘。
2）Access-Control-Allow-Origin不能設(shè)為星號(hào)址遇，必須指定明確的、與請(qǐng)求網(wǎng)頁一致的域名斋竞。同時(shí)倔约，Cookie依然遵循同源政策，只有用服務(wù)器域名設(shè)置的Cookie才會(huì)上傳坝初，其他域名的Cookie并不會(huì)上傳浸剩，且（跨源）原網(wǎng)頁代碼中的document.cookie也無法讀取服務(wù)器域名下的Cookie。
非簡(jiǎn)單請(qǐng)求：
1.預(yù)檢請(qǐng)求：
非簡(jiǎn)單請(qǐng)求會(huì)在正式通信前加一次預(yù)檢（preflight）請(qǐng)求脖卖。作用是瀏覽器先詢問服務(wù)器當(dāng)前網(wǎng)頁所在域名是否在服務(wù)器的許可名單中乒省，以及可以使用哪些HTTP方法以及頭信息字段巧颈。只有得到肯定答復(fù)畦木，瀏覽器才會(huì)發(fā)送XMLHttpRequest，否則報(bào)錯(cuò)砸泛。
OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
請(qǐng)求方法是OPTIONS十籍，表示這個(gè)請(qǐng)求是用來詢問的，頭信息中的關(guān)鍵信息有3個(gè)：
（1）表示請(qǐng)求來自哪個(gè)源
Origin: http://api.bob.com
（2）列出瀏覽器的CORS請(qǐng)求會(huì)用到哪些HTTP方法
Access-Control-Request-Method: PUT
（3）指定瀏覽器CORS請(qǐng)求會(huì)額外發(fā)送的頭信息字段
Access-Control-Request-Headers: X-Custom-Header
2.預(yù)檢請(qǐng)求的回應(yīng)（有兩種情況：A允許唇礁、B不允許）
A.服務(wù)器允許這次跨域請(qǐng)求
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000
服務(wù)器返回中要注意的字段：
（1）服務(wù)器同意的跨域請(qǐng)求源：
Access-Control-Allow-Origin: http://api.bob.com
（2）服務(wù)器支持的所有跨域請(qǐng)求的方法：
Access-Control-Allow-Methods: GET, POST, PUT
（3）表明服務(wù)器支持的所有頭信息字段：
Access-Control-Allow-Headers: X-Custom-Header
（4）指定本次預(yù)檢請(qǐng)求的有效期勾栗，單位為秒，即允許請(qǐng)求該條回應(yīng)在有效期之前都不用再發(fā)送預(yù)檢請(qǐng)求：
Access-Control-Max-Age: 1728000
B.服務(wù)器不允許這次跨域請(qǐng)求即origin指定的源不在許可范圍內(nèi)盏筐，服務(wù)器會(huì)返回一個(gè)正常的HTTP回應(yīng)围俘。但是頭信息中沒有包含Access-Control-Allow-Origin字段，就知道出錯(cuò)了，從而拋出一個(gè)錯(cuò)誤界牡，被XMLHttpRequest的onerror回調(diào)函數(shù)捕獲簿寂。但是要注意的是，這種HTTP回應(yīng)的狀態(tài)碼很有可能是200宿亡，所以無法通過狀態(tài)碼識(shí)別這種錯(cuò)誤常遂。
3.正式請(qǐng)求過了預(yù)檢請(qǐng)求，非簡(jiǎn)單請(qǐng)求的正式請(qǐng)求就與簡(jiǎn)單請(qǐng)求一樣了挽荠。
