首頁 > 開發者 > JavaScript

黃聰： Javascript跨域訪問解決方案

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

由於安全方面的考慮，Javascript被限制了跨域訪問的能力，但是有時候我們希望能夠做一些合理的跨域訪問的事情，那麼怎麼辦呢？
這裡分兩類情況：
一、基於同一父域的子域之間頁面的訪問；參見如下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指令碼：

[javascript:firstline[1]] view plaincopy
  1. <mce:script type="text/javascript"><!--  
  2. Var sUrl="http://Jipiao.taobao.com/proxy.do"; //本域下Proxy 位址  
  3. var callback =  
  4. {  
  5.    success: function(res) {  alert(res.responseText);  },   
  6.    failure: function(res) {  alert('failure');},   
  7.    argument:{}   
  8. }  
  9. YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);    
  10. // --></mce:script>  

第二步：
完成域A服務端的Proxy程式(這裡假定是一個servlet)，偽碼如下：[java:firstline[1]] view plaincopy

  1. Public class Proxy extends …….{  
  2. ..doGet(……..){  
  3.  HttpClient  client=……;  
  4.  GetMethod get=new  GetMethod("www.baidu.com/xxxxx.do");//訪問域B的連結  
  5.  int statusCode = client.executeMethod(get);  
  6.  if (statusCode != HttpStatus.SC_OK) {  
  7.      byte[] responseBody = get.getResponseBody();  
  8.      String res=new String(responseBody);  
  9.      Httpresponse.getWriter().write(res);//將資料返回給域A    
  10.  }  
  11. }  
  12.   
  13. }  

方案2：通過Script標籤:
在域A頁面http://Jipiao.taobao.com/test.htm 的head中寫一個空的Script標籤：

[xhtml:firstline[1]] view plaincopy
  1. <html>  
  2. <head>  
  3.  <mce:script id="remoteScript" type="text/javascript" src=""/><!--  
  4. <head>  
  5. <body>  
  6. <script type="text/javascript" >  
  7.  Var remoteScript=document.getElementById("remoteScript");  
  8.  remoteScript.src="www.baidu.com/xxxxx.do";//域B的連結  
  9.  alert(remote.test);//使用域B返回的JSON資料   
  10.  alert(f[0]);  
  11. // --></mce:script>  
  12. </body>  
  13. </html>  

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

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

[xhtml:firstline[1]] view plaincopy
  1. <html>  
  2. <head>  
  3. <head>  
  4. <body>  
  5. <mce:script type="text/javascript" ><!--  
  6.  Document.domain="taobao.com";  
  7.  Var remoteHtml=document.getElementById("remoteHtml");  
  8.  remoteHtml.src="promotion.taobao.com/xxxx.htm";//這裡訪問域B的連結  
  9.  var document=remoteHtml.ContentDocument; //這裡就可以使用document來操作域B中頁面xxx.htm的資料了  
  10. // --></mce:script>  
  11. <iframe id="remoteHtml" src="" style="diapay:none" mce_style="diapay:none"/>  
  12. </body>  
  13. </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跨域訪問的意思，我想再補充幾點：

  1. 跨域訪問，簡單來說就是 A 網站的 javascript 代碼試圖訪問 B 網站，包括提交內容和擷取內容；比如想從A網站的頁面中執行另外一個B網站內某頁面中的JS對象、或者想在A網站的頁面中用JS去解析B網站內某頁面的dom元素等；出現這種跨域訪問問題的應用情境一般是iframe中嵌入不同域的頁面、或者向不同域發送Ajax請求等；
  2. 由於安全原因，跨域訪問是被各大瀏覽器所預設禁止的；但是瀏覽器並不禁止在頁面中引用其他域的JS檔案，並可以自由執行引入的JS檔案中的function；這點個人覺得至關重要！
  3. 是否跨域的判斷規則為對三者進行比較：網域名稱、協議、連接埠；三者中若有一個不相同，則會出現跨域問題；我們經常說的跨域問題一般指網域名稱不同，因為這種情境出現的幾率最高而且有一些辦法可以解決；比如前面提到的taobao.com域下的次層網域跨域問題；
  4. 對於主域都不一樣、或者協議不同（比如https與http）的跨域問題（比如*.taobao.com域想訪問*.baidu.com域內的內容），想從Web端來解決是完全不可能的，只能通過服務端Proxy的方案來解決；
  5. 常見的不同域間的頁面制約dom元素包括：
    window.location 可以設定，但不能讀取。其它的 location 屬性和方法被禁止訪問；
    document.href 可以設定，但不能讀取。其它的 document 屬性和方法被禁止訪問；
    <iframe> 的 src 可以設定，但不能讀取；

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
formatmoney javascript javascript getdatetime unlink javascript hmac javascript javascript echo javascript encode javascript encodeuri
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More