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請求不能發(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想要獲取對方的**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è)頁面對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還有更高級的用法：
父窗口先打開一個(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容量很大相满，可以放置非常長的字符串；缺點(diǎn)：必須監(jiān)聽子窗口window.name屬性的變化壶唤，影響網(wǎng)頁性能雳灵。
方法3、使用HTML5的window.postMessage跨域
window.postMessage(message,targetOrigin) 方法是html5新引進(jìn)的特性闸盔，可以使用它來向其它的window對象發(fā)送消息，無論這個(gè)window對象是屬于同源或不同源琳省，目前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中的代碼：
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);
};
在子頁面中通過message事件監(jiān)聽父頁面發(fā)送來的消息并顯示歪沃。child.com/index.html中的代碼：
window.addEventListener('message', function(event){
// 通過origin屬性判斷消息來源地址
if (event.origin == 'http://parent.com') {
alert(event.data); // 彈出"I was there!"
alert(event.source);
// 對parent.com嗦锐、index.html中window對象的引用
// 但由于同源策略，這里event.source不可以訪問window對象
}
}, false);
栗子2：
假設(shè)在a.html里嵌套個(gè)
在這兩個(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請求不能發(fā)送育灸。
方法4腻窒、通過JSONP跨域
【適用范圍：（1）可以是兩個(gè)完全不同源的域；（2）只支持HTTP請求中的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
...
function callback(data) {
console.log(data.url)
}
...
b.js
callback({url: 'http://www.rccoder.net'})
這就類似于JSONP的原理了癌蓖。
JSONP的基本思想是：先在網(wǎng)頁上添加一個(gè)script標(biāo)簽，設(shè)置這個(gè)script標(biāo)簽的src屬性用于向服務(wù)器請求JSON數(shù)據(jù) 租副，需要注意的是，src屬性的查詢字符串一定要加一個(gè)callback函數(shù)用僧，用來指定回調(diào)函數(shù)的名字 结胀。而這個(gè)函數(shù)是在資源加載之前就已經(jīng)在前端定義好的糟港，這個(gè)函數(shù)接受一個(gè)參數(shù)并利用這個(gè)參數(shù)做一些事情。向服務(wù)器請求后沼死，服務(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');//請求服務(wù)器數(shù)據(jù)并規(guī)定回調(diào)函數(shù)為foo
}
function foo(data) {
console.log('Your public IP address is: ' + data.ip);
};
向服務(wù)器example.com請求數(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請求匾效；（3）被絕大多數(shù)現(xiàn)代瀏覽器支持舷蟀，老式瀏覽器不支持；（4）需要服務(wù)端支持】
對于前端開發(fā)者來說面哼，跨域的CORS通信與同源的AJAX通信沒有差別野宜，代碼完全一樣。因此魔策，實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器匈子。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信闯袒。
瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）虎敦。
只要同時(shí)滿足以下兩大條件，就屬于簡單請求政敢。
（1) 請求方法是以下三種方法之一：
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è)條件堕仔，就屬于非簡單請求。瀏覽器對這兩種請求的處理晌区，是不一樣的摩骨。
簡單請求：
下面是一次跨源AJAX請求通贞，瀏覽器發(fā)現(xiàn)它是簡單請求，就會(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ù)器收到這條請求恼五，如果這個(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請求時(shí)诈嘿，XMLHttpRequest對象的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請求中打開withCredentials屬性映之。
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
否則即使服務(wù)器允許，客戶端也不會(huì)發(fā)送赎败。
2）Access-Control-Allow-Origin不能設(shè)為星號僵刮，必須指定明確的搞糕、與請求網(wǎng)頁一致的域名窍仰。同時(shí)礼殊，Cookie依然遵循同源政策，只有用服務(wù)器域名設(shè)置的Cookie才會(huì)上傳碟狞，其他域名的Cookie并不會(huì)上傳族沃，且（跨源）原網(wǎng)頁代碼中的document.cookie也無法讀取服務(wù)器域名下的Cookie竭业。
非簡單請求：
1.預(yù)檢請求：
非簡單請求會(huì)在正式通信前加一次預(yù)檢（preflight）請求未辆。作用是瀏覽器先詢問服務(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...
請求方法是OPTIONS逼蒙，表示這個(gè)請求是用來詢問的，頭信息中的關(guān)鍵信息有3個(gè)：
（1）表示請求來自哪個(gè)源
Origin: http://api.bob.com
（2）列出瀏覽器的CORS請求會(huì)用到哪些HTTP方法
Access-Control-Request-Method: PUT
（3）指定瀏覽器CORS請求會(huì)額外發(fā)送的頭信息字段
Access-Control-Request-Headers: X-Custom-Header
2.預(yù)檢請求的回應(yīng)（有兩種情況：A允許僵井、B不允許）
A.服務(wù)器允許這次跨域請求
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ù)器同意的跨域請求源：
Access-Control-Allow-Origin: http://api.bob.com
（2）服務(wù)器支持的所有跨域請求的方法：
Access-Control-Allow-Methods: GET, POST, PUT
（3）表明服務(wù)器支持的所有頭信息字段：
Access-Control-Allow-Headers: X-Custom-Header
（4）指定本次預(yù)檢請求的有效期，單位為秒蹈胡，即允許請求該條回應(yīng)在有效期之前都不用再發(fā)送預(yù)檢請求：
Access-Control-Max-Age: 1728000
B.服務(wù)器不允許這次跨域請求即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)碼識別這種錯(cuò)誤炊昆。
3.正式請求過了預(yù)檢請求凤巨，非簡單請求的正式請求就與簡單請求一樣了磅甩。
