詳解js跨域

什麼是跨域？

概念：只要協議、域名、端口有任何一個不一樣，都被看成是不一樣的域。

URL                      說明       是否容許通訊http://www.a.com/a.jshttp://www.a.com/b.js     同一域名下   容許http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不一樣文件夾 容許http://www.a.com:8000/a.jshttp://www.a.com/b.js     同一域名，不一樣端口  不容許http://www.a.com/a.jshttps://www.a.com/b.js 同一域名，不一樣協議 不容許http://www.a.com/a.jshttp://70.32.92.74/b.js 域名和域名對應ip 不容許http://www.a.com/a.jshttp://script.a.com/b.js 主域相同，子域不一樣 不容許http://www.a.com/a.jshttp://a.com/b.js 同一域名，不一樣二級域名（同上） 不容許（cookie這種狀況下也不容許訪問）http://www.cnblogs.com/a.jshttp://www.a.com/b.js 不一樣域名 不容許

對於端口和協議的不一樣，只能經過後臺來解決。

跨域資源共享（CORS）

CORS（Cross-Origin Resource Sharing）跨域資源共享，定義了必須在訪問跨域資源時，瀏覽器與服務器應該如何溝通。CORS背後的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功仍是失敗。

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/trigkit4",true);
    xhr.send();</script>

以上的trigkit4是相對路徑，若是咱們要使用CORS，相關Ajax代碼可能以下所示：

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true);
    xhr.send();</script>

代碼與以前的區別就在於相對路徑換成了其餘域的絕對路徑，也就是你要跨域訪問的接口地址。

服務器端對於CORS的支持，主要就是經過設置Access-Control-Allow-Origin來進行的。若是瀏覽器檢測到相應的設置，就能夠容許Ajax進行跨域的訪問。

---

要解決跨域的問題，咱們可使用如下幾種方法：

經過jsonp跨域

如今問題來了？什麼是jsonp？維基百科的定義是：JSONP（JSON with Padding）是資料格式 JSON 的一種「使用模式」，可讓網頁從別的網域要資料。

JSONP也叫填充式JSON，是應用JSON的一種新方法，只不過是被包含在函數調用中的JSON，例如：

callback({"name","trigkit4"});

JSONP由兩部分組成：回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數，而數據就是傳入回調函數中的JSON數據。

在js中，咱們直接用XMLHttpRequest請求不一樣域上的數據時，是不能夠的。可是，在頁面上引入不一樣域上的js腳本文件倒是能夠的，jsonp正是利用這個特性來實現的。 例如：

<script type="text/javascript">
    function dosomething(jsondata){        //處理得到的json數據
    }</script><script src="http://example.com/data.php?callback=dosomething"></script>

js文件載入成功後會執行咱們在url參數中指定的函數，而且會把咱們須要的json數據做爲參數傳入。因此jsonp是須要服務器端的頁面進行相應的配合的。

<?php$callback = $_GET['callback'];//獲得回調函數名$data = array('a','b','c');//要返回的數據echo $callback.'('.json_encode($data).')';//輸出?>

最終，輸出結果爲：dosomething(['a','b','c']);

若是你的頁面使用jquery，那麼經過它封裝的方法就能很方便的來進行jsonp操做了。

<script type="text/javascript">
    $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){        //處理得到的json數據
    });</script>

jquery會自動生成一個全局函數來替換callback=?中的問號，以後獲取到數據後又會自動銷燬，實際上就是起一個臨時代理函數的做用。$.getJSON方法會自動判斷是否跨域，不跨域的話，就調用普通的ajax方法；跨域的話，則會以異步加載js文件的形式來調用jsonp的回調函數。

JSONP的優缺點

JSONP的優勢是：它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中均可以運行，不須要XMLHttpRequest或ActiveX的支持；而且在請求完畢後能夠經過調用callback的方式回傳結果。

JSONP的缺點則是：它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種狀況，不能解決不一樣域的兩個頁面之間如何進行JavaScript調用的問題。

CORS和JSONP對比

CORS與JSONP相比，無疑更爲先進、方便和可靠。

    一、 JSONP只能實現GET請求，而CORS支持全部類型的HTTP請求。    二、 使用CORS，開發者可使用普通的XMLHttpRequest發起請求和得到數據，比起JSONP有更好的錯誤處理。    三、 JSONP主要被老的瀏覽器支持，它們每每不支持CORS，而絕大多數現代瀏覽器都已經支持了CORS）。

經過修改document.domain來跨子域

瀏覽器都有一個同源策略，其限制之一就是第一種方法中咱們說的不能經過ajax的方法去請求不一樣源中的文檔。 它的第二個限制是瀏覽器中不一樣域的框架之間是不能進行js的交互操做的。
不一樣的框架之間是能夠獲取window對象的，但卻沒法獲取相應的屬性和方法。好比，有一個頁面，它的地址是http://www.example.com/a.html  ， 在這個頁面裏面有一個iframe，它的src是http://example.com/b.html, 很顯然，這個頁面與它裏面的iframe框架是不一樣域的，因此咱們是沒法經過在頁面中書寫js代碼來獲取iframe中的東西的：

<script type="text/javascript">
    function test(){        var iframe = document.getElementById('ifame');        var win = document.contentWindow;//能夠獲取到iframe裏的window對象，但該window對象的屬性和方法幾乎是不可用的
        var doc = win.document;//這裏獲取不到iframe裏的document對象
        var name = win.name;//這裏一樣獲取不到window對象的name屬性
    }</script><iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>

這個時候，document.domain就能夠派上用場了，咱們只要把http://www.example.com/a.html 和 http://example.com/b.html這兩個頁面的document.domain都設成相同的域名就能夠了。但要注意的是，document.domain的設置是有限制的，咱們只能把document.domain設置成自身或更高一級的父域，且主域必須相同。

1.在頁面 http://www.example.com/a.html 中設置document.domain:

<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe><script type="text/javascript">
    document.domain = 'example.com';//設置成主域
    function test(){
        alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 對象
    }</script>

2.在頁面 http://example.com/b.html 中也設置document.domain:

<script type="text/javascript">
    document.domain = 'example.com';//在iframe載入這個頁面也設置document.domain，使之與主頁面的document.domain相同</script>

修改document.domain的方法只適用於不一樣子域的框架間的交互。

使用window.name來進行跨域

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

使用HTML5的window.postMessage方法跨域

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