摘要：由此可以看出，同源策略確實是必不可少的，那么它會帶來哪些限制呢和無法讀取。由于瀏覽器的同源策略，在網頁端出現了這個跨域的問題，然而我們發現，所有的屬性并沒有受到相關的限制，比如等。

本文按照政治問答題必備套路分為以下3個部分：

為什么要跨域？

跨域是什么？

如何實現跨域？

自古以來（1995年起），為了用戶的信息安全，瀏覽器就引入了同源策略。那么同源策略是如何保證用戶的信息安全的呢？

栗子1：如果沒有同源策略，你打開了你的銀行賬戶頁面A，又打開了另一個不相關的頁面B，這時候如果B是惡意網站，B可以通過Javascript輕松訪問和修改A頁面中的內容。

栗子2：現在我們廣泛的使用cookie來維護用戶的登錄狀態，而如果沒有同源策略，這些cookie信息就會泄露，其他網站就可以冒充這個登錄用戶。

由此可以看出，同源策略確實是必不可少的，那么它會帶來哪些限制呢？

1、Cookie、LocalStorage和IndexDB無法讀取。
2、DOM無法獲得。
3、AJAX請求不能發送。

有時候我們需要突破上述限制，就需要用跨域的方法來解決。

什么叫做不同的域？比如：

http://www.a.com:8000/a.js
協議（http）、域名（www.a.com）、端口（8000）三者中有一個不同就叫不同的域。

跨域就是不同的域間相互訪問時使用某些方法來突破上述限制。

【注意：協議或者端口的不同，只能通過后臺來解決。】

1.Cookie、LocalStorage和IndexDB無法讀取。
2.DOM無法獲得。

【適用范圍：（1）兩個域只是子域不同；（2）只適用于iframe窗口與父窗口之間互相獲取cookie和DOM節點，不能突破LocalStorage和IndexDB的限制。】

當兩個不同的域只是子域不同時，可以通過把document.domain設置為他們共同的父域來解決。

栗子：

A: http://www.example.com/a.html
B: http://example.com/b.html
當A、B想要獲取對方的cookie或者DOM節點時，可以設置:

document.domain="example.com";

來解決。

這時A網頁通過腳本設置:

document.cookie = "testA=hello";

B網頁就可以拿到這個cookie：

var aCookie = document.cookie;

【適用范圍：（1）可以是兩個完全不同源的域；（2）同一個窗口內：即同一個標簽頁內先后打開的窗口。】

pre-condition：

window.name屬性有個特征：即在一個窗口(window)的生命周期內,窗口載入的所有的頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的所有頁面中的。

基于這個思想，我們可以在某個頁面設置好 window.name 的值，然后在本標簽頁內跳轉到另外一個域下的頁面。在這個頁面中就可以獲取到我們剛剛設置的 window.name 了。

結合iframe還有更高級的用法：

父窗口先打開一個與自己不同源的子窗口，在這個子窗口里設置：

window.name = data;

然后讓子窗口跳轉到一個與父窗口同域的網址：

location="http://www.parent.com/a.html";

這時，因為同域并且同一窗口window.name是不變的，所以父窗口可以獲取到子窗口下的window.name。

var data = document.getElementById("myFrame").contentWindow.name;

優點：window.name容量很大，可以放置非常長的字符串；缺點：必須監聽子窗口window.name屬性的變化，影響網頁性能。

window.postMessage(message,targetOrigin) 方法是html5新引進的特性，可以使用它來向其它的window對象發送消息，無論這個window對象是屬于同源或不同源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經支持window.postMessage方法。

otherWindow.postMessage(message, targetOrigin);

otherWindow:接受消息頁面的window的引用。可以是頁面中iframe的contentWindow屬性；window.open的返回值；通過name或下標從window.frames取到的值。
message:所要發送的數據，string類型。
targetOrigin:用于限制otherWindow，*表示不做限制。

在父頁面中嵌入子頁面，通過postMessage發送數據。
parent.com/index.html中的代碼：

在子頁面中通過message事件監聽父頁面發送來的消息并顯示。
child.com/index.html中的代碼：

假設在a.html里嵌套個

在這兩個頁面里互相通信

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頁面，首先監聽到了b.html通過postMessage傳來的消息，就先彈出 a data，然后a通過postMessage傳遞消息給子頁面b.html，這時會彈出 b data。

3）AJAX請求不能發送。

【適用范圍：（1）可以是兩個完全不同源的域；（2）只支持HTTP請求中的GET方式；（3）老式瀏覽器全部支持；（4）需要服務端支持】

JSONP(JSON with Padding)是資料格式JSON的一種使用模式，可以讓網頁從別的網域要資料。

由于瀏覽器的同源策略，在網頁端出現了這個“跨域”的問題，然而我們發現，所有的 src 屬性并沒有受到相關的限制，比如 img / script 等。

JSONP 的原理就要從 script 說起。script 可以引用其他域的腳本文件，比如這樣：

a.html
...


...

b.js
callback({url: "http://www.rccoder.net"})

這就類似于JSONP的原理了。

JSONP的基本思想是：先在網頁上添加一個script標簽，設置這個script標簽的src屬性用于向服務器請求JSON數據 ，需要注意的是，src屬性的查詢字符串一定要加一個callback參數，用來指定回調函數的名字 。而這個函數是在資源加載之前就已經在前端定義好的，這個函數接受一個參數并利用這個參數做一些事情。向服務器請求后，服務器會將JSON數據放在一個指定名字的回調函數里作為其參數傳回來。這時，因為函數已經在前端定義好了，所以會直接調用。

一個栗子：

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");//請求服務器數據并規定回調函數為foo
}

function foo(data) {
    console.log("Your public IP address is: " + data.ip);
};

向服務器example.com請求數據，這時服務器會先生成JSON數據，這里是{"ip": "8.8.8.8"}，然后以JS語法的方式生成一個函數，函數名就是傳遞上來的callback參數的值，最后將數據放在函數的參數中返回：

foo({
    "ip": "8.8.8.8"
});

客戶端解析script標簽，執行返回的JS代碼，調用函數。

【適用范圍：（1）可以是兩個完全不同源的域；（2）支持所有類型的HTTP請求；（3）被絕大多數現代瀏覽器支持，老式瀏覽器不支持；（4）需要服務端支持】

對于前端開發者來說，跨域的CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。因此，實現CORS通信的關鍵是服務器。只要服務器實現了CORS接口，就可以跨源通信。

瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。

只要同時滿足以下兩大條件，就屬于簡單請求。

（1) 請求方法是以下三種方法之一：
HEAD
GET
POST
（2）HTTP的頭信息不超出以下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同時滿足上面兩個條件，就屬于非簡單請求。
瀏覽器對這兩種請求的處理，是不一樣的。

下面是一次跨源AJAX請求，瀏覽器發現它是簡單請求，就會直接在頭信息中加一個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...

服務器收到這條請求，如果這個origin指定的源在許可范圍內，那么服務器返回的頭信息中會包含Access-Control-Allow-Origin字段，值與origin的值相同，以及其他幾個相關字段：

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: 該字段可選。設為true表示服務器允許發送cookie
Access-Control-Expose-Headers: 該字段可選。CORS請求時，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader("FooBar")可以返回FooBar字段的值。

想要發送cookie，這里還有兩點需要額外注意：

1）開發者必須在AJAX請求中打開withCredentials屬性。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

否則即使服務器允許，客戶端也不會發送。

2）Access-Control-Allow-Origin不能設為星號，必須指定明確的、與請求網頁一致的域名。同時，Cookie依然遵循同源政策，只有用服務器域名設置的Cookie才會上傳，其他域名的Cookie并不會上傳，且（跨源）原網頁代碼中的document.cookie也無法讀取服務器域名下的Cookie。

1.預檢請求：

非簡單請求會在正式通信前加一次預檢（preflight）請求。作用是瀏覽器先詢問服務器當前網頁所在域名是否在服務器的許可名單中，以及可以使用哪些HTTP方法以及頭信息字段。只有得到肯定答復，瀏覽器才會發送XMLHttpRequest，否則報錯。

一個栗子：

var url = "http://api.alice.com/cors";
var xhr = new XMLHttpRequest();
xhr.open("PUT", url, true);
xhr.setRequestHeader("X-Custom-Header", "value");
xhr.send();

HTTP請求方法為PUT，并發送一個自定義頭信息"X-Custom-Header"，瀏覽器發現這是一個非簡單請求，就會自動發送一個預檢請求，預檢請求的HTTP頭信息如下：

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，表示這個請求是用來詢問的，頭信息中的關鍵信息有3個：

（1）表示請求來自哪個源

Origin: http://api.bob.com

（2）列出瀏覽器的CORS請求會用到哪些HTTP方法

Access-Control-Request-Method: PUT

（3）指定瀏覽器CORS請求會額外發送的頭信息字段

Access-Control-Request-Headers: X-Custom-Header

2.預檢請求的回應（有兩種情況：A允許、B不允許）

A.服務器允許這次跨域請求

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

服務器返回中要注意的字段：

（1）服務器同意的跨域請求源：

Access-Control-Allow-Origin: http://api.bob.com

（2）服務器支持的所有跨域請求的方法：

 Access-Control-Allow-Methods: GET, POST, PUT   

（3）表明服務器支持的所有頭信息字段：

Access-Control-Allow-Headers: X-Custom-Header

（4）指定本次預檢請求的有效期，單位為秒，即允許請求該條回應在有效期之前都不用再發送預檢請求：

Access-Control-Max-Age: 1728000

B.服務器不允許這次跨域請求
即origin指定的源不在許可范圍內，服務器會返回一個正常的HTTP回應。但是頭信息中沒有包含Access-Control-Allow-Origin字段，就知道出錯了，從而拋出一個錯誤，被XMLHttpRequest的onerror回調函數捕獲。但是要注意的是，這種HTTP回應的狀態碼很有可能是200，所以無法通過狀態碼識別這種錯誤。

3.正式請求
過了預檢請求，非簡單請求的正式請求就與簡單請求一樣了。

《Javascript高級程序設計》 P582

《Javascript權威指南》 P668 22.3 跨域消息傳遞

http://www.ruanyifeng.com/blo...

http://www.ruanyifeng.com/blo...

https://segmentfault.com/a/11...

https://segmentfault.com/a/11...

https://segmentfault.com/a/11...

http://www.cnblogs.com/rainma...