Javascript 跨域訪問解決方案
更新時(shí)間：2009年02月14日 14:01:27 作者：
由于安全方面的考慮，Javascript被限制了跨域訪問的能力，但是有時(shí)候我們希望能夠做一些合理的跨域訪問的事情，那么怎么辦呢？
這里分兩類情況：
一、基于同一父域的子域之間頁(yè)面的訪問；參見如下3個(gè)domain域：taobao.com、jipiao.taobao.com、promotion.taobao.com；它們有相同的父域taobao.com。
二、基于不同父域頁(yè)面之間的訪問；參見如下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");//訪問域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：通過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";//這里訪問域B的鏈接
var document=remoteHtml.ContentDocument; //這里就可以使用document來操作域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)是可以適用用于幾乎所有的跨域訪問，而且只需要要一個(gè)域中進(jìn)行開發(fā)，另一個(gè)域可以提供任何類型格式的數(shù)據(jù)。缺點(diǎn)是這種方案經(jīng)過了中間Proxy，所以延遲可能稍微大一點(diǎn)，并且會(huì)加重本域服務(wù)器的負(fù)荷，開發(fā)工作量也稍微大一點(diǎn)。
Script標(biāo)簽的方案可以說是非常簡(jiǎn)單的，不用幾行代碼就搞定了事，不過它對(duì)返回的數(shù)據(jù)格式要求有點(diǎn)嚴(yán)格，只能是Json格式數(shù)據(jù),如果是其他格式的數(shù)據(jù)，那么這種方法就無(wú)能為力了。
隱藏iframe方式也很簡(jiǎn)單，它可以處理任何返回的數(shù)據(jù)格式，但它只適用在具有同一個(gè)父域下的跨域請(qǐng)求上，并且要求其他域得配合開發(fā)，即需要設(shè)置document.domain。
原帖詳見：http://blog.csdn.net/lovingprince/archive/2008/09/20/2954675.aspx
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
對(duì)于JS跨域訪問的意思，我想再補(bǔ)充幾點(diǎn)：
跨域訪問，簡(jiǎn)單來說就是 A 網(wǎng)站的 javascript 代碼試圖訪問 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)這種跨域訪問問題的應(yīng)用場(chǎng)景一般是iframe中嵌入不同域的頁(yè)面、或者向不同域發(fā)送Ajax請(qǐng)求等；
由于安全原因，跨域訪問是被各大瀏覽器所默認(rèn)禁止的；但是瀏覽器并不禁止在頁(yè)面中引用其他域的JS文件，并可以自由執(zhí)行引入的JS文件中的function；這點(diǎn)個(gè)人覺得至關(guān)重要！
是否跨域的判斷規(guī)則為對(duì)三者進(jìn)行比較：域名、協(xié)議、端口；三者中若有一個(gè)不相同，則會(huì)出現(xiàn)跨域問題；我們經(jīng)常說的跨域問題一般指域名不同，因?yàn)檫@種場(chǎng)景出現(xiàn)的幾率最高而且有一些辦法可以解決；比如前面提到的taobao.com域下的二級(jí)域名跨域問題；
對(duì)于主域都不一樣、或者協(xié)議不同（比如https與http）的跨域問題（比如*.taobao.com域想訪問*.baidu.com域內(nèi)的內(nèi)容），想從Web端來解決是完全不可能的，只能通過服務(wù)端Proxy的方案來解決；
常見的不同域間的頁(yè)面制約dom元素包括：
window.location 可以設(shè)置，但不能讀取。其它的 location 屬性和方法被禁止訪問；
document.href 可以設(shè)置，但不能讀取。其它的 document 屬性和方法被禁止訪問；
<iframe> 的 src 可以設(shè)置，但不能讀??；
一、基于同一父域的子域之間頁(yè)面的訪問；參見如下3個(gè)domain域：taobao.com、jipiao.taobao.com、promotion.taobao.com；它們有相同的父域taobao.com。
二、基于不同父域頁(yè)面之間的訪問；參見如下3個(gè)domain域：taobao.com、baidu.com、sina.com.cn；它們具有不同的父域。
解決它們之間跨域的方案有：
方案1：服務(wù)器Proxy
域A的頁(yè)面JS需要訪問域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ù)，最后再通過Proxy將數(shù)據(jù)返回給頁(yè)面JS使用。
經(jīng)過的訪問流程就是： 域A下JS --> 域A 下Proxy -- > 域B下的鏈接
例子：
第一步：
域A: http://Jipiao.taobao.com/test.htm
頁(yè)面上javascript腳本：
復(fù)制代碼 代碼如下:
<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)，偽碼如下：
復(fù)制代碼 代碼如下:
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);//將數(shù)據(jù)返回給域A
}
}
}
方案2：通過Script標(biāo)簽:
在域A頁(yè)面http://Jipiao.taobao.com/test.htm 的head中寫一個(gè)空的Script標(biāo)簽：
復(fù)制代碼 代碼如下:
<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：
復(fù)制代碼 代碼如下:
<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中頁(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)是可以適用用于幾乎所有的跨域訪問，而且只需要要一個(gè)域中進(jìn)行開發(fā)，另一個(gè)域可以提供任何類型格式的數(shù)據(jù)。缺點(diǎn)是這種方案經(jīng)過了中間Proxy，所以延遲可能稍微大一點(diǎn)，并且會(huì)加重本域服務(wù)器的負(fù)荷，開發(fā)工作量也稍微大一點(diǎn)。
Script標(biāo)簽的方案可以說是非常簡(jiǎn)單的，不用幾行代碼就搞定了事，不過它對(duì)返回的數(shù)據(jù)格式要求有點(diǎn)嚴(yán)格，只能是Json格式數(shù)據(jù),如果是其他格式的數(shù)據(jù)，那么這種方法就無(wú)能為力了。
隱藏iframe方式也很簡(jiǎn)單，它可以處理任何返回的數(shù)據(jù)格式，但它只適用在具有同一個(gè)父域下的跨域請(qǐng)求上，并且要求其他域得配合開發(fā)，即需要設(shè)置document.domain。
原帖詳見：http://blog.csdn.net/lovingprince/archive/2008/09/20/2954675.aspx
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
對(duì)于JS跨域訪問的意思，我想再補(bǔ)充幾點(diǎn)：
跨域訪問，簡(jiǎn)單來說就是 A 網(wǎng)站的 javascript 代碼試圖訪問 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)這種跨域訪問問題的應(yīng)用場(chǎng)景一般是iframe中嵌入不同域的頁(yè)面、或者向不同域發(fā)送Ajax請(qǐng)求等；
由于安全原因，跨域訪問是被各大瀏覽器所默認(rèn)禁止的；但是瀏覽器并不禁止在頁(yè)面中引用其他域的JS文件，并可以自由執(zhí)行引入的JS文件中的function；這點(diǎn)個(gè)人覺得至關(guān)重要！
是否跨域的判斷規(guī)則為對(duì)三者進(jìn)行比較：域名、協(xié)議、端口；三者中若有一個(gè)不相同，則會(huì)出現(xiàn)跨域問題；我們經(jīng)常說的跨域問題一般指域名不同，因?yàn)檫@種場(chǎng)景出現(xiàn)的幾率最高而且有一些辦法可以解決；比如前面提到的taobao.com域下的二級(jí)域名跨域問題；
對(duì)于主域都不一樣、或者協(xié)議不同（比如https與http）的跨域問題（比如*.taobao.com域想訪問*.baidu.com域內(nèi)的內(nèi)容），想從Web端來解決是完全不可能的，只能通過服務(wù)端Proxy的方案來解決；
常見的不同域間的頁(yè)面制約dom元素包括：
window.location 可以設(shè)置，但不能讀取。其它的 location 屬性和方法被禁止訪問；
document.href 可以設(shè)置，但不能讀取。其它的 document 屬性和方法被禁止訪問；
<iframe> 的 src 可以設(shè)置，但不能讀??；
相關(guān)文章
Array?對(duì)象是前端開發(fā)中使用頻率最高的數(shù)據(jù)結(jié)構(gòu)之一,今天我們來復(fù)習(xí)一下它的幾種操作方法,find(),some()和filter(),通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
OpenCV.js實(shí)現(xiàn)喬丹動(dòng)圖素描效果圖文教程
這篇文章主要為大家介紹了OpenCV.js實(shí)現(xiàn)喬丹動(dòng)圖素描效果的圖文教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
javascript與jquery動(dòng)態(tài)創(chuàng)建html元素示例
這篇文章主要介紹了javascript與jquery動(dòng)態(tài)創(chuàng)建html元素的方法,結(jié)合實(shí)例形式分析了javascript與jQuery動(dòng)態(tài)創(chuàng)建頁(yè)面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
Javascript中For In語(yǔ)句用法實(shí)例
這篇文章主要介紹了Javascript中For In語(yǔ)句用法,實(shí)例分析了javascript使用For In語(yǔ)句遍歷數(shù)組的技巧,需要的朋友可以參考下2015-05-05
微信小程序常用簡(jiǎn)易小函數(shù)總結(jié)
這篇文章主要介紹了微信小程序常用簡(jiǎn)易小函數(shù),結(jié)合實(shí)例形式總結(jié)分析了微信小程序提示、登陸、驗(yàn)證、session操作等相關(guān)操作函數(shù)與使用技巧,需要的朋友可以參考下2019-02-02
JavaScript去除數(shù)組里重復(fù)值的方法
這篇文章主要介紹了JavaScript去除數(shù)組里重復(fù)值的方法,涉及javascript針對(duì)數(shù)組操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
給大家分享一下如何才能開發(fā)出更好的JavaScript模塊和功能，有興趣的朋友參考學(xué)習(xí)下吧。2017-12-12
這篇文章主要介紹了JS隨機(jī)打亂數(shù)組的方法,結(jié)合實(shí)例總結(jié)分析了幾種常用的數(shù)組打亂順序并重新進(jìn)行排序的技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-06-06
本文主要介紹了js 顏色選擇插件。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
如果想用百度地圖api，首先需要先獲取一個(gè)百度地圖api的密鑰，然后引入百度地圖的api，這篇文章就講下百度地圖api如何使用的相關(guān)資料，需要的朋友可以參考下2015-08-08