Javascript 跨域訪問解決方案

來源:互聯網
上載者:User

這裡分兩類情況:
一、基於同一父域的子域之間頁面的訪問;參見如下3個domain域:taobao.com、jipiao.taobao.com、promotion.taobao.com;它們有相同的父域taobao.com。
二、基於不同父域頁面之間的訪問;參見如下3個domain域:taobao.com、baidu.com、sina.com.cn;它們具有不同的父域。

解決它們之間跨域的方案有:
方案1:伺服器Proxy
域A的頁面JS需要訪問域B下的連結擷取資料,該方案在域A的伺服器端建立一個Proxy程式(可能是ASP、servlet等任何服務端程式),域A的頁面JS直接調用本域下的Proxy程式,proxy程式負責將請求發送給域B下的連結並擷取到資料,最後再通過Proxy將資料返回給頁面JS使用。
經過的訪問流程就是: 域A下JS --> 域A 下Proxy -- > 域B下的連結
例子:
第一步:
域A: http://Jipiao.taobao.com/test.htm
頁面上javascript指令碼:

複製代碼 代碼如下:<script type="text/javascript"><!--
Var sUrl="http://Jipiao.taobao.com/proxy.do"; //本域下Proxy 位址
var callback =
{
success: function(res) { alert(res.responseText); },
failure: function(res) { alert('failure');},
argument:{}
}
YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
// --></script>

第二步:
完成域A服務端的Proxy程式(這裡假定是一個servlet),偽碼如下:複製代碼 代碼如下:Public class Proxy extends …….{
..doGet(……..){
HttpClient client=……;
GetMethod get=new GetMethod("www.baidu.com/xxxxx.do");//訪問域B的連結
int statusCode = client.executeMethod(get);
if (statusCode != HttpStatus.SC_OK) {
byte[] responseBody = get.getResponseBody();
String res=new String(responseBody);
Httpresponse.getWriter().write(res);//將資料返回給域A
}
}
}

方案2:通過Script標籤:
在域A頁面http://Jipiao.taobao.com/test.htm 的head中寫一個空的Script標籤: 複製代碼 代碼如下:<html>
<head>
<script id="remoteScript" type="text/javascript" src=""/><!--
<head>
<body>
<script type="text/javascript" >
Var remoteScript=document.getElementById("remoteScript");
remoteScript.src="www.baidu.com/xxxxx.do";//域B的連結
alert(remote.test);//使用域B返回的JSON資料
alert(f[0]);
// --></script>
</body>
</html>

注意:這種方案要求域B返回的資料必須是合法的JSON格式或者如JS檔案的格式;比如域B返回的資料格式如下:
Var remote={test:'hello'};
Var f=[2,1];

方案3:隱藏iframe、共用domain:
即域A頁面http://jipiao.taobao.com/yyyy.htm 的頁面上寫一個隱藏的iframe: 複製代碼 代碼如下:<html>
<head>
<head>
<body>
<script type="text/javascript" ><!--
Document.domain="taobao.com";
Var remoteHtml=document.getElementById("remoteHtml");
remoteHtml.src="promotion.taobao.com/xxxx.htm";//這裡訪問域B的連結
var document=remoteHtml.ContentDocument; //這裡就可以使用document來操作域B中頁面xxx.htm的資料了
// --></script>
<iframe id="remoteHtml" src="" style="diapay:none" style="diapay:none"/>
</body>
</html>

注意:這裡http://promotion.taobao.com/xxxx.htm 頁面也需要設定document.domain="taobao.com", 這種方法才能奏效。
之所以這種iframe的方法不適合不同父域之間的跨域,是因為設定document.domain只能設定為自己的父域,而不是能設定為其他域,例如:jiapiao.taobao.com只能設定document.domain="taobao.com",而不能是document.domain="baidu.com";
這裡列舉的三種方案各有優缺點:
Proxy方案優點是可以適用用於幾乎所有的跨域訪問,而且只需要要一個域中進行開發,另一個域可以提供任何類型格式的資料。缺點是這種方案經過了中間Proxy,所以延遲可能稍微大一點,並且會加重本網域服務器的負荷,開發工作量也稍微大一點。
Script標籤的方案可以說是非常簡單的,不用幾行代碼就搞定了事,不過它對返回的資料格式要求有點嚴格,只能是Json格式資料,如果是其他格式的資料,那麼這種方法就無能為力了。
隱藏iframe方式也很簡單,它可以處理任何返回的資料格式,但它只適用在具有同一個父域下的跨域請求上,並且要求其他域得配合開發,即需要設定document.domain。
原帖詳見:http://blog.csdn.net/lovingprince/archive/2008/09/20/2954675.aspx
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
對於JS跨域訪問的意思,我想再補充幾點:
跨域訪問,簡單來說就是 A 網站的 javascript 代碼試圖訪問 B 網站,包括提交內容和擷取內容;比如想從A網站的頁面中執行另外一個B網站內某頁面中的JS對象、或者想在A網站的頁面中用JS去解析B網站內某頁面的dom元素等;出現這種跨域訪問問題的應用情境一般是iframe中嵌入不同域的頁面、或者向不同域發送Ajax請求等;
由於安全原因,跨域訪問是被各大瀏覽器所預設禁止的;但是瀏覽器並不禁止在頁面中引用其他域的JS檔案,並可以自由執行引入的JS檔案中的function;這點個人覺得至關重要!
是否跨域的判斷規則為對三者進行比較:網域名稱、協議、連接埠;三者中若有一個不相同,則會出現跨域問題;我們經常說的跨域問題一般指網域名稱不同,因為這種情境出現的幾率最高而且有一些辦法可以解決;比如前面提到的taobao.com域下的次層網域跨域問題;
對於主域都不一樣、或者協議不同(比如https與http)的跨域問題(比如*.taobao.com域想訪問*.baidu.com域內的內容),想從Web端來解決是完全不可能的,只能通過服務端Proxy的方案來解決;
常見的不同域間的頁面制約dom元素包括:
window.location 可以設定,但不能讀取。其它的 location 屬性和方法被禁止訪問;
document.href 可以設定,但不能讀取。其它的 document 屬性和方法被禁止訪問;
<iframe> 的 src 可以設定,但不能讀取;

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.