Javascript跨域訪問解決方案

時間 2019-12-08

原文原文鏈接

Javascript跨域訪問解決方案

分類： WEB TIPS 2009-02-13 14:08 15882人閱讀評論(5) 收藏舉報

javascript iframe servlet callback domain function

因爲安全方面的考慮，Javascript被限制了跨域訪問的能力，可是有時候咱們但願可以作一些合理的跨域訪問的事情，那麼怎麼辦呢？
這裏分兩類狀況：
1、基於同一父域的子域之間頁面的訪問；參見以下3個domain域：taobao.com、jipiao.taobao.com、promotion.taobao.com；它們有相同的父域taobao.com。
2、基於不一樣父域頁面之間的訪問；參見以下3個domain域：taobao.com、baidu.com、sina.com.cn；它們具備不一樣的父域。javascript

解決它們之間跨域的方案有：
方案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腳本：html

[javascript] view plain copy

<mce: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);
// --></mce:script>

第二步：
完成域A服務端的Proxy程序(這裏假定是一個servlet)，僞碼以下：

[java] view plain copy

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標籤：
java

[xhtml] view plain copy

<html>
<head>
<mce: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]);
// --></mce:script>
</body>
</html>

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

方案3：隱藏iframe、共享domain:
即域A頁面http://jipiao.taobao.com/yyyy.htm 的頁面上寫一個隱藏的iframe：跨域

[xhtml] view plain copy

<html>
<head>
<head>
<body>
<mce: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的數據了
// --></mce:script>
<iframe id="remoteHtml" src="" style="diapay:none" mce_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跨域訪問的意思，我想再補充幾點：dom

跨域訪問，簡單來講就是 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 能夠設置，但不能讀取；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。