Section1、為什么要跨域？
自古以來(lái)（1995年起），為了用戶的信息安全，瀏覽器就引入了同源策略。那么同源策略是如何保證用戶的信息安全的呢？
栗子1：如果沒(méi)有同源策略，你打開了你的銀行賬戶頁(yè)面A，又打開了另一個(gè)不相關(guān)的頁(yè)面B，這時(shí)候如果B是惡意網(wǎng)站，B可以通過(guò)Javascript輕松訪問(wèn)和修改A頁(yè)面中的內(nèi)容。
栗子2：現(xiàn)在我們廣泛的使用cookie來(lái)維護(hù)用戶的登錄狀態(tài)，而如果沒(méi)有同源策略，這些cookie信息就會(huì)泄露，其他網(wǎng)站就可以冒充這個(gè)登錄用戶。
由此可以看出，同源策略確實(shí)是必不可少的，那么它會(huì)帶來(lái)哪些限制呢？
1、Cookie、LocalStorage和IndexDB無(wú)法讀取。
2、DOM無(wú)法獲得。
3、AJAX請(qǐng)求不能發(fā)送。
有時(shí)候我們需要突破上述限制，就需要用跨域的方法來(lái)解決。
Section2、跨域是什么？
什么叫做不同的域？比如：
http://www.a.com:8000/a.js協(xié)議（http）、域名（www.a.com）、端口（8000）三者中有一個(gè)不同就叫不同的域。
跨域就是不同的域間相互訪問(wèn)時(shí)使用某些方法來(lái)突破上述限制。
【注意：協(xié)議或者端口的不同，只能通過(guò)后臺(tái)來(lái)解決。】
Section3、怎么跨域？
一、解決Section1中提到的1、2兩點(diǎn)限制：
1.Cookie、LocalStorage和IndexDB無(wú)法讀取。2.DOM無(wú)法獲得。
方法1、通過(guò)document.domain跨子域
【適用范圍：（1）兩個(gè)域只是子域不同；（2）只適用于iframe窗口與父窗口之間互相獲取cookie和DOM節(jié)點(diǎn)，不能突破LocalStorage和IndexDB的限制。】
當(dāng)兩個(gè)不同的域只是子域不同時(shí)，可以通過(guò)把document.domain設(shè)置為他們共同的父域來(lái)解決。
栗子：
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';來(lái)解決。
這時(shí)A網(wǎng)頁(yè)通過(guò)腳本設(shè)置:document.cookie = "testA=hello";B網(wǎng)頁(yè)就可以拿到這個(gè)cookie：
var aCookie = document.cookie;
方法2、通過(guò)window.name跨域
【適用范圍：（1）可以是兩個(gè)完全不同源的域；（2）同一個(gè)窗口內(nèi)：即同一個(gè)標(biāo)簽頁(yè)內(nèi)先后打開的窗口。】
pre-condition：
window.name屬性有個(gè)特征：即在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁(yè)面都是共享一個(gè)window.name的，每個(gè)頁(yè)面對(duì)window.name都有讀寫的權(quán)限，window.name是持久存在一個(gè)窗口載入過(guò)的所有頁(yè)面中的。
基于這個(gè)思想，我們可以在某個(gè)頁(yè)面設(shè)置好 window.name 的值，然后在本標(biāo)簽頁(yè)內(nèi)跳轉(zhuǎn)到另外一個(gè)域下的頁(yè)面。在這個(gè)頁(yè)面中就可以獲取到我們剛剛設(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)頁(yè)性能。
方法3、使用HTML5的window.postMessage跨域
window.postMessage(message,targetOrigin) 方法是html5新引進(jìn)的特性，可以使用它來(lái)向其它的window對(duì)象發(fā)送消息，無(wú)論這個(gè)window對(duì)象是屬于同源或不同源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經(jīng)支持window.postMessage方法。
otherWindow.postMessage(message, targetOrigin);
otherWindow:接受消息頁(yè)面的window的引用。可以是頁(yè)面中iframe的contentWindow屬性；window.open的返回值；通過(guò)name或下標(biāo)從window.frames取到的值。
message:所要發(fā)送的數(shù)據(jù)，string類型。
targetOrigin:用于限制otherWindow，*表示不做限制。
栗子1：
在父頁(yè)面中嵌入子頁(yè)面，通過(guò)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>
在子頁(yè)面中通過(guò)message事件監(jiān)聽父頁(yè)面發(fā)送來(lái)的消息并顯示。child.com/index.html中的代碼：
<script type="text/javascript">
window.addEventListener('message', function(event){
// 通過(guò)origin屬性判斷消息來(lái)源地址
if (event.origin == 'http://parent.com') {
alert(event.data); // 彈出"I was there!"
alert(event.source);
// 對(duì)parent.com、index.html中window對(duì)象的引用
// 但由于同源策略，這里event.source不可以訪問(wèn)window對(duì)象
}
}, false);
</script>
栗子2：
假設(shè)在a.html里嵌套個(gè)
<iframe src="http://www.child.com/b.html" frameborder="0"></iframe>
在這兩個(gè)頁(yè)面里互相通信
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頁(yè)面，首先監(jiān)聽到了b.html通過(guò)postMessage傳來(lái)的消息，就先彈出 a data，然后a通過(guò)postMessage傳遞消息給子頁(yè)面b.html，這時(shí)會(huì)彈出 b data。
二、解決第3點(diǎn)限制：
3）AJAX請(qǐng)求不能發(fā)送。
方法4、通過(guò)JSONP跨域
【適用范圍：（1）可以是兩個(gè)完全不同源的域；（2）只支持HTTP請(qǐng)求中的GET方式；（3）老式瀏覽器全部支持；（4）需要服務(wù)端支持】
JSONP(JSON with Padding)是資料格式JSON的一種使用模式，可以讓網(wǎng)頁(yè)從別的網(wǎng)域要資料。
由于瀏覽器的同源策略，在網(wǎng)頁(yè)端出現(xiàn)了這個(gè)“跨域”的問(wèn)題，然而我們發(fā)現(xiàn)，所有的 src 屬性并沒(méi)有受到相關(guān)的限制，比如 img / script 等。
JSONP 的原理就要從 script 說(shuō)起。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)頁(yè)上添加一個(gè)script標(biāo)簽，設(shè)置這個(gè)script標(biāo)簽的src屬性用于向服務(wù)器請(qǐng)求JSON數(shù)據(jù) ，需要注意的是，src屬性的查詢字符串一定要加一個(gè)callback函數(shù)，用來(lái)指定回調(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ù)傳回來(lái)。這時(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語(yǔ)法的方式生成一個(gè)函數(shù)，函數(shù)名就是傳遞上來(lái)的callback參數(shù)的值，最后將數(shù)據(jù)放在函數(shù)的參數(shù)中返回：
foo({
"ip": "8.8.8.8"
});
客戶端解析script標(biāo)簽，執(zhí)行返回的JS代碼，調(diào)用函數(shù)。
方法5、通過(guò)CORS跨域
【適用范圍：（1）可以是兩個(gè)完全不同源的域；（2）支持所有類型的HTTP請(qǐng)求；（3）被絕大多數(shù)現(xiàn)代瀏覽器支持，老式瀏覽器不支持；（4）需要服務(wù)端支持】
對(duì)于前端開發(fā)者來(lái)說(shuō)，跨域的CORS通信與同源的AJAX通信沒(méi)有差別，代碼完全一樣。因此，實(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)頁(yè)一致的域名。同時(shí)，Cookie依然遵循同源政策，只有用服務(wù)器域名設(shè)置的Cookie才會(huì)上傳，其他域名的Cookie并不會(huì)上傳，且（跨源）原網(wǎng)頁(yè)代碼中的document.cookie也無(wú)法讀取服務(wù)器域名下的Cookie。
非簡(jiǎn)單請(qǐng)求：
1.預(yù)檢請(qǐng)求：
非簡(jiǎn)單請(qǐng)求會(huì)在正式通信前加一次預(yù)檢（preflight）請(qǐng)求。作用是瀏覽器先詢問(wèn)服務(wù)器當(dāng)前網(wǎng)頁(yè)所在域名是否在服務(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)求是用來(lái)詢問(wèn)的，頭信息中的關(guān)鍵信息有3個(gè)：
（1）表示請(qǐng)求來(lái)自哪個(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)。但是頭信息中沒(méi)有包含Access-Control-Allow-Origin字段，就知道出錯(cuò)了，從而拋出一個(gè)錯(cuò)誤，被XMLHttpRequest的onerror回調(diào)函數(shù)捕獲。但是要注意的是，這種HTTP回應(yīng)的狀態(tài)碼很有可能是200，所以無(wú)法通過(guò)狀態(tài)碼識(shí)別這種錯(cuò)誤。
3.正式請(qǐng)求過(guò)了預(yù)檢請(qǐng)求，非簡(jiǎn)單請(qǐng)求的正式請(qǐng)求就與簡(jiǎn)單請(qǐng)求一樣了。
