天天看點

關于ajax跨域請求(cross Domain)

Cross Domain AJAX主要就是A.com網站的頁面發出一個XMLHttpRequest,這個Request的url是B.com,這樣的請求是被禁止的,浏覽器處于安全考慮不允許進行跨域通路,即同源政策。主要有4鐘方式解決。

主要原理就是寫一個代理請求的轉發過程。用戶端請求自己的伺服器,伺服器把請求目标位址并且得到回應,伺服器再把結果傳回給用戶端。這種方式,對于開發者來說還是不錯的選擇,因為可以在伺服器上對回應的結果做自己的處理後把重新組織過的資料傳回給用戶端。

JSONP的基本原理即是:利用HTML的<script>标簽可擷取任何來源JavaScript代碼的特點,實作資料的跨域通路。在本地定義一個callback,通過<script>标簽的src屬性擷取遠端API的資料(将callback函數名傳遞過去),遠端伺服器的API需要符合JSONP的規範,即将原本JSON格式的輸出資料改寫為javascript的函數調用代碼(callback為函數,原JSON資料為參數);這樣API傳回的不再是JSON格式的資料而是JavaScript的代碼。

例子:

A.com/test.html的代碼如下:

關于ajax跨域請求(cross Domain)

<html>  

<head>  

<script type="text/javascript">  

    function callback(result) {  

        alert(result.Name);  

    }  

</script>  

<script type="text/javascript" src="http://B.com/api/user.php?cb=callback"></script>  

</head>  

<body>  

</body>  

</html>  

将B<code>.com/api/user.php</code>的代碼稍微進行修改,使得輸出結果為:

關于ajax跨域請求(cross Domain)

callback({"Name": "Gavin", "Age" : 1982, "Rank": 7});  

這樣當運作A.com/test.html的時候,代碼&lt;script type="text/javascript" src="http://B.com/api/user.php?cb=callback"&gt;&lt;/script&gt;的結果變為:

關于ajax跨域請求(cross Domain)

    callback({"Name": "Gavin", "Age" : 1982, "Rank": 7});  

然後調用本地定義的callback函數,輸出result.Name即為Gavin。最終實作跨域資料通路。

伺服器通過傳回響應頭進行權限控制,例如

Access-Control-Allow-Origin:控制那些外部請求可以通路該資源

Access-Control-Allow-Credentials :結合用戶端 xmlhttprequest 的 withCredentials 屬性可以控制是否發送 cookie 等驗證資訊

Access-Control-Allow-Headers :控制用戶端可以發送的額外頭部資訊,多個值使用逗号分隔

Access-Control-Allow-Methods: 控制用戶端可以發送的請求方法(如:POST),多個值使用逗号分隔

ie 的例外

不出預料,ie 不完全支援此規範:

ie&gt;=8

Access-Control-Allow-Origin 控制那些外部請求可以通路該資源

也就意味着:不能發送 cookie 資訊, 不能設定額外請求頭。

子域通路作為跨域通路的特例,上述方法的任意一種都可行,但由于請求雙方間共享一個主域,因而存在另外一種方案

如:

a.t.com 希望發請求給 b.t.com 的資源位址,但 b.t.com 的資源實際上隻能通過 b.t.com 下的請求才能通路,而我們知道通過設定

關于ajax跨域請求(cross Domain)

document.domain = "t.com" ;  

 那麼 a.t.com 就可以操作 b.t.com 的文檔以及 window 對象。

問題

domain 設定是不可逆的,一旦首頁面設定了 domain,那麼其包含的iframe除非設定和首頁面相同的 domain,否則就不能再和首頁面通信,會導緻大量的已有代碼修改。

繼續閱讀