web開發跨域的使用方法

這次帶給大家web開發跨域的使用方法，web開發跨域使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

在大家進行web開發過程中，對於跨域都會有接觸，很多人不是很了解跨域是什麼，對於web開發中的跨域怎麼解決。以下文章就此給大家具體介紹下，感興趣的一起來了解下跨域以及跨域的解決。

什麼是跨域？

概念如下：只要協定、網域、連接埠有任何一個不同，都被當作是不同的網域

以下是具體的跨域情況詳解

# URL	說明	是否允許通訊
# http://www.a.com/a.js、http://www.a.com/b.js	同一網域下	允許
# http://www.a.com/lab/a.js、http://www.a.com/script/b.js	同一網域下不同資料夾	允許
# http://www.a.com:8000/a.js、http://www.a.com/b.js	同一域名，不同連接埠	不允許
# http://www.a.com/a.js、https://www.a.com/b.js	同一域名，不同協定	不允許
# http://www.a.com/a.js、http://70.32.92.74/b.js	域名和域名對應ip	不允許
# http://www.a.com/a.js、http://script.a.com/b.js	主域相同，子域不同	不允許（cookie這種情況下也不允許存取）
# http://www.a.com/a.js、http://a.com/b.js	同一域名，不同二級域名（同上）	不允許（cookie這種情況下也不允許存取）
# http://www.cnblogs.com/a.js、http://www.a.com/b.js	不同域名	不允許

#

一、document.domain跨域

# 原理：相同主網域不同子網域下的頁面，可以設定document.domain讓它們同域

限制：同域document提供的是頁間的互通，需要載入iframe頁面

下面幾個網域下的頁面都是可以透過document.domain跨網域互通的： http://a.com/foo, http://b.a.com/bar, http://c.a.com/bar。但只能以頁面嵌套的方式來進行頁面互通，例如常見的iframe方式就可以完成頁面嵌套

// URL http://a.com/foo
var ifr = document.createElement('iframe');
ifr.src = 'http://b.a.com/bar'; 
ifr.onload = function(){
    var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementsById("foo").innerHTML);
};
ifr.style.display = 'none';
document.body.appendChild(ifr);

上述程式碼所在的URL是http://a.com/foo，它對http://b.a.com/bar的DOM存取要求後者將 document.domain往上設定一級

// URL http://b.a.com/bar
document.domain = 'a.com'

document.domain只能從子域設定到主域，往下設定以及往其他網域設定都是不允許的， Chrome給出的錯誤是這樣的

Uncaught DOMException: Failed to set the 'domain' property on 'Document': 'baidu.com' is not a suffix of 'b.a.com'

二、有src的標籤

原理：所有具有src屬性的HTML標籤都是可以跨域的，包括, <script></script>

# 限制：需要建立一個DOM對象，只能用於GET方法

在document.body中append一個具有src屬性的HTML標籤，src屬性值指向的URL會以GET方法被訪問，該訪問是可以跨域的

其實樣式表的標籤也是可以跨域的，只要是有src或href的HTML標籤都有跨域的能力

不同的HTML標籤發送HTTP請求的時機不同，例如在更改src屬性時就會發送請求，而script, iframe, link[rel=stylesheet]只有在添加到DOM樹之後才會發送HTTP請求：

var img = new Image();
img.src = 'http://some/picture';        // 发送HTTP请求
var ifr = $('<iframe>', {src: 'http://b.a.com/bar'});
$('body').append(ifr);                  // 发送HTTP请求</iframe>

三、JSONP

原理：<script>是可以跨域的，而且在跨域腳本中可以直接回調目前腳本的函數</script>

限制：需要建立一個DOM物件並且加入DOM樹，只能用於GET方法

JSONP利用的是<script>可以跨域的特性，跨域URL回傳的腳本不僅包含數據，還包含一個回呼</script>

// URL: http://b.a.com/foo
var data = {
    foo: 'bar',
    bar: 'foo'
};
callback(data);

然後在我們在主站http://a.com中，可以這樣來跨域取得http://b.a.com的資料：

// URL: http://a.com/foo
var callback = function(data){
    // 处理跨域请求得到的数据
};
var script = $('<script>&#39;, {src: &#39;http://b.a.com/bar&#39;});
$(&#39;body&#39;).append(script);</script>

其實jQuery已經封裝了JSONP的使用，我們可以這樣來

$.getJSON( "http://b.a.com/bar?callback=callback", function( data ){
    // 处理跨域请求得到的数据
});

$.getJSON與$.get的區別是前者會把responseText轉換為JSON，而且當URL有callback參數時， jQuery會把它解釋為一個JSONP請求，創建一個<script>標籤來完成該請求</script>

四、navigation 物件

原理：iframe之間是共享navigator物件的，用它來傳遞訊息

# 要求：IE6/7

有些人注意到了IE6/7的漏洞：iframe之間的window.navigator物件是共享的。我們可以把它當作Messenger，透過它來傳遞訊息。例如一個簡單的委託：

// a.com
navigation.onData(){
    // 数据到达的处理函数
}
typeof navigation.getData === 'function' 
    || navigation.getData()

// b.com
navigation.getData = function(){
    $.get('/path/under/b.com')
        .success(function(data){
            typeof navigation.onData === 'function'
                || navigation.onData(data)
        });
}

# 與document.navigator類似，window.name也是目前視窗所有頁面所共享的。也可以用它來傳遞訊息。同樣蛋痛的辦法還有傳遞Hash（有些人叫錨點），這是因為每次瀏覽器打開一個URL時，URL後面的#xxx部分會保留下來，那麼新的頁面可以從這裡獲得上一個頁面的數據

五、跨域資源共享（CORS）

# 原理：伺服器設定Access-Control-Allow-OriginHTTP回應頭之後，瀏覽器將允許跨網域請求

限制：瀏覽器需要支援HTML5，可以支援POST，PUT等方法

前面提到的跨域手段都是某種意義上的Hack， HTML5標準中提出的跨域資源共享（Cross Origin Resource Share，CORS）才是正道。它支援其他的HTTP方法如PUT, POST等，可以從本質上解決跨域問題。

例如，從http://a.com要存取http://b.com的數據，通常Chrome會因跨域請求而報錯

XMLHttpRequest cannot load http://b.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://a.com' is therefore not allowed access

错误原因是被请求资源没有设置Access-Control-Allow-Origin，所以我们在b.com的服务器中设置这个响应头字段即可

Access-Control-Allow-Origin: *              # 允许所有域名访问，或者
Access-Control-Allow-Origin: http://a.com   # 只允许所有域名访问

六、window.postMessage

原理：HTML5允许窗口之间发送消息

限制：浏览器需要支持HTML5，获取窗口句柄后才能相互通信

这是一个安全的跨域通信方法，postMessage(message,targetOrigin)也是HTML5引入的特性。 可以给任何一个window发送消息，不论是否同源。第二个参数可以是*但如果你设置了一个URL但不相符，那么该事件不会被分发。看一个普通的使用方式吧

// URL: http://a.com/foo
var win = window.open('http://b.com/bar');
win.postMessage('Hello, bar!', 'http://b.com');

// URL: http://b.com/bar
window.addEventListener('message',function(event) {
    console.log(event.data);
});

七、访问控制安全的讨论

在HTML5之前，JSONP已经成为跨域的事实标准了，jQuery都给出了支持。 值得注意的是它只是Hack，并没有产生额外的安全问题。 因为JSONP要成功获取数据，需要跨域资源所在服务器的配合，比如资源所在服务器需要自愿地回调一个合适的函数，所以服务器仍然有能力控制资源的跨域访问

跨域的正道还是要使用HTML5提供的CORS头字段以及window.postMessage， 可以支持POST, PUT等HTTP方法，从机制上解决跨域问题。 值得注意的是Access-Control-Allow-Origin头字段是资源所在服务器设置的， 访问控制的责任仍然是在提供资源的服务器一方，这和JSONP是一样的

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

以上是web開發跨域的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！