Javascript 跨域訪問(wèn)解決方案

2024-05-06 14:16:06

字體：大中小

供稿：網(wǎng)友

這里分兩類情況：
一、基于同一父域的子域之間頁(yè)面的訪問(wèn)；參見(jiàn)如下3個(gè)domain域：taobao.com、jipiao.taobao.com、promotion.taobao.com；它們有相同的父域taobao.com。
二、基于不同父域頁(yè)面之間的訪問(wèn)；參見(jiàn)如下3個(gè)domain域：taobao.com、baidu.com、sina.com.cn；它們具有不同的父域。

解決它們之間跨域的方案有：
方案1：服務(wù)器Proxy
域A的頁(yè)面JS需要訪問(wèn)域B下的鏈接獲取數(shù)據(jù)，該方案在域A的服務(wù)器端建立一個(gè)Proxy程序(可能是ASP、servlet等任何服務(wù)端程序)，域A的頁(yè)面JS直接調(diào)用本域下的Proxy程序，proxy程序負(fù)責(zé)將請(qǐng)求發(fā)送給域B下的鏈接并獲取到數(shù)據(jù)，最后再通過(guò)Proxy將數(shù)據(jù)返回給頁(yè)面JS使用。
經(jīng)過(guò)的訪問(wèn)流程就是：域A下JS --> 域A 下Proxy -- > 域B下的鏈接
例子：
第一步：
域A: http://Jipiao.taobao.com/test.htm
頁(yè)面上javascript腳本：
代碼如下:
<script type="text/javascript"></script>

第二步：
完成域A服務(wù)端的Proxy程序(這里假定是一個(gè)servlet)，偽碼如下：
代碼如下:
Public class Proxy extends …….{
..doGet(……..){
HttpClient client=……;
GetMethod get=new GetMethod("www.baidu.com/xxxxx.do");//訪問(wèn)域B的鏈接
int statusCode = client.executeMethod(get);
if (statusCode != HttpStatus.SC_OK) {
byte[] responseBody = get.getResponseBody();
String res=new String(responseBody);
Httpresponse.getWriter().write(res);//將數(shù)據(jù)返回給域A
}
}
}

方案2：通過(guò)Script標(biāo)簽:
在域A頁(yè)面http://Jipiao.taobao.com/test.htm 的head中寫一個(gè)空的Script標(biāo)簽：
代碼如下:
<html>
<head>
<script id="remoteScript" type="text/javascript" src=""/></script>
</body>
</html>

注意：這種方案要求域B返回的數(shù)據(jù)必須是合法的JSON格式或者如JS文件的格式；比如域B返回的數(shù)據(jù)格式如下：
Var remote={test:'hello'};
Var f=[2,1];

方案3：隱藏iframe、共享domain:
即域A頁(yè)面http://jipiao.taobao.com/yyyy.htm 的頁(yè)面上寫一個(gè)隱藏的iframe：
代碼如下:
<html>
<head>
<head>
<body>
<script type="text/javascript" ><!--
Document.domain="taobao.com";
Var remoteHtml=document.getElementById("remoteHtml");