Javascript 跨域訪問(wèn)解決方案
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
由于安全方面的考慮,Javascript被限制了跨域訪問(wèn)的能力,但是有時(shí)候我們希望能夠做一些合理的跨域訪問(wèn)的事情,那么怎么辦呢? 這里分兩類情況:
一、基于同一父域的子域之間頁(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;它們具有不同的父域。 解決它們之間跨域的方案有: 代碼如下: <script type="text/javascript"><!-- Var sUrl="http://Jipiao.taobao.com/proxy.do"; //本域下代理地址 var callback = { success: function(res) { alert(res.responseText); }, failure: function(res) { alert('failure');}, argument:{} } YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null); // --></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=""/><!-- <head> <body> <script type="text/javascript" > Var remoteScript=document.getElementById("remoteScript"); remoteScript.src="www.baidu.com/xxxxx.do";//域B的鏈接 alert(remote.test);//使用域B返回的JSON數(shù)據(jù) alert(f[0]); // --></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"); remoteHtml.src="promotion.taobao.com/xxxx.htm";//這里訪問(wèn)域B的鏈接 var document=remoteHtml.ContentDocument; //這里就可以使用document來(lái)操作域B中頁(yè)面xxx.htm的數(shù)據(jù)了 // --></script> <iframe id="remoteHtml" src="" style="diapay:none" style="diapay:none"/> </body> </html> 注意:這里http://promotion.taobao.com/xxxx.htm 頁(yè)面也需要設(shè)置document.domain="taobao.com", 這種方法才能奏效。 之所以這種iframe的方法不適合不同父域之間的跨域,是因?yàn)樵O(shè)置document.domain只能設(shè)置為自己的父域,而不是能設(shè)置為其他域,例如:jiapiao.taobao.com只能設(shè)置document.domain="taobao.com",而不能是document.domain="baidu.com"; 這里列舉的三種方案各有優(yōu)缺點(diǎn): Proxy方案優(yōu)點(diǎn)是可以適用用于幾乎所有的跨域訪問(wèn),而且只需要要一個(gè)域中進(jìn)行開(kāi)發(fā),另一個(gè)域可以提供任何類型格式的數(shù)據(jù)。缺點(diǎn)是這種方案經(jīng)過(guò)了中間Proxy,所以延遲可能稍微大一點(diǎn),并且會(huì)加重本域服務(wù)器的負(fù)荷,開(kāi)發(fā)工作量也稍微大一點(diǎn)。 Script標(biāo)簽的方案可以說(shuō)是非常簡(jiǎn)單的,不用幾行代碼就搞定了事,不過(guò)它對(duì)返回的數(shù)據(jù)格式要求有點(diǎn)嚴(yán)格,只能是Json格式數(shù)據(jù),如果是其他格式的數(shù)據(jù),那么這種方法就無(wú)能為力了。 隱藏iframe方式也很簡(jiǎn)單,它可以處理任何返回的數(shù)據(jù)格式,但它只適用在具有同一個(gè)父域下的跨域請(qǐng)求上,并且要求其他域得配合開(kāi)發(fā),即需要設(shè)置document.domain。 原帖詳見(jiàn):http://blog.csdn.net/lovingprince/archive/2008/09/20/2954675.aspx -------------------------------------------------------------------------------- 對(duì)于JS跨域訪問(wèn)的意思,我想再補(bǔ)充幾點(diǎn): 跨域訪問(wèn),簡(jiǎn)單來(lái)說(shuō)就是 A 網(wǎng)站的 javascript 代碼試圖訪問(wèn) B 網(wǎng)站,包括提交內(nèi)容和獲取內(nèi)容;比如想從A網(wǎng)站的頁(yè)面中執(zhí)行另外一個(gè)B網(wǎng)站內(nèi)某頁(yè)面中的JS對(duì)象、或者想在A網(wǎng)站的頁(yè)面中用JS去解析B網(wǎng)站內(nèi)某頁(yè)面的dom元素等;出現(xiàn)這種跨域訪問(wèn)問(wèn)題的應(yīng)用場(chǎng)景一般是iframe中嵌入不同域的頁(yè)面、或者向不同域發(fā)送Ajax請(qǐng)求等; 由于安全原因,跨域訪問(wèn)是被各大瀏覽器所默認(rèn)禁止的;但是瀏覽器并不禁止在頁(yè)面中引用其他域的JS文件,并可以自由執(zhí)行引入的JS文件中的function;這點(diǎn)個(gè)人覺(jué)得至關(guān)重要! 是否跨域的判斷規(guī)則為對(duì)三者進(jìn)行比較:域名、協(xié)議、端口;三者中若有一個(gè)不相同,則會(huì)出現(xiàn)跨域問(wèn)題;我們經(jīng)常說(shuō)的跨域問(wèn)題一般指域名不同,因?yàn)檫@種場(chǎng)景出現(xiàn)的幾率最高而且有一些辦法可以解決;比如前面提到的taobao.com域下的二級(jí)域名跨域問(wèn)題; 對(duì)于主域都不一樣、或者協(xié)議不同(比如https與http)的跨域問(wèn)題(比如*.taobao.com域想訪問(wèn)*.baidu.com域內(nèi)的內(nèi)容),想從Web端來(lái)解決是完全不可能的,只能通過(guò)服務(wù)端Proxy的方案來(lái)解決; 常見(jiàn)的不同域間的頁(yè)面制約dom元素包括: window.location 可以設(shè)置,但不能讀取。其它的 location 屬性和方法被禁止訪問(wèn); document.href 可以設(shè)置,但不能讀取。其它的 document 屬性和方法被禁止訪問(wèn); <iframe> 的 src 可以設(shè)置,但不能讀取。 該文章在 2013/9/3 14:41:39 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |