Javascript跨域访问解决方案

2023-09-17 14:24

由于安全方面的考虑, Javascript 被限制了跨域访问的 能力,但是有时候我们希望能够做一些合理的跨域访问的事情,那么怎么办呢?

 

这里分两类情况:


        
一、基于同一父域的子域之间页面的访问
                
参见如下 3 domain 域:

1 www.nigeriaembassy.cn
          2
www.nigeriaembassy.cn
          3
www.nigeriaembassy.cn

它们有相同的父域   www.nigeriaembassy.cn


        
二、基于不同父域页面之间的访问
                
参见如下 3 domain 域:

1 www.nigeriaembassy.cn
             2
www.nigeriaembassy.cn

3 www.nigeriaembassy.cn

     它们具有不同的父域。

 

解决它们之间跨域的方案:

服务器 Proxy:   A 的页面 JS 需要访问域 B 下的链接获取数据,该方案在域 A 的服务器端建立一个 Proxy 程序 ( 可能是 ASP servlet 等任何服务端程序 ) ,域 A 的页面 JS 直接调用本域下的 Proxy 程序, proxy 程序负责将请求发送给域 B 下的链接并获取到数据,最 后再通过 Proxy 将数据返回给页面 JS 使用。

经过的访问流程就是: A JS-- à A Proxy--- à B 下的链接

 

例子:

第一步:

 

  A:  http://www.nigeriaembassy.cn/test.htm     页面上 javascript 脚本

 

view plain copy to clipboard print ?
  1.        

 

第二步:

Proxy 程序 ( 这里假定是一个 servlet)

 

  

view plain copy to clipboard print ?
  1. Public  class  Proxy  extends  …….{   
  2.   
  3. ..doGet(……..){   
  4.   
  5. HttpClient  client=……;   
  6.   
  7. GetMethod get= new    GetMethod( " www.nigeriaembassy.cn/www.nigeriaembassy.cn " ) ; // 访问域 B 的链接    
  8.   
  9. int  statusCode = client.executeMethod( get );   
  10.   
  11. if  (statusCode != www.nigeriaembassy.cn_OK) {   
  12.   
  13.    
  14.     
  15.    
  16. byte [] responseBody = get.getResponseBody();  
  17.   
  18. String res=new  String(responseBody);  
  19.   
  20. Httpresponse.getWriter().write(res);//   
  21. 将 数据返回给域  
  22. A  
  23.   
  24.   
  25.     }   
  26.   
  27. }   
  28.   
  29. }   
  

  Script 标 签 : A 页 面 http://www.nigeriaembassy.cn/test.htm head 中写一个空的 Script 标签

view plain copy to clipboard print ?
  1. < html >    
  2.   
  3.   < head >    
  4.   
  5.   < mce:script   id =”remoteScript”  type =”text/javascript”  src = "””"   mce_src = "””"   />

     

    注意:这种方案要求域 B 返回的数据必须是合法的 JSON 格式或者如 JS 文件的格式。

     

    B 返回的数据格式如下:

    view plain copy to clipboard print ?
    1. Var remote={test:’hello’};   
    2.   
    3. Var f=[‘2,1];   
    4.   
    5. {“test”:"hello" , "arrays" :[2,1]}  

     

     

    对于基于同一父域的子域之间页面的访问这一类情况,还有第三种方式:
       
    隐藏 iframe: 即域 A www.nigeriaembassy.cn/yyyy.htm 的页面上写一个 隐藏的 iframe

    view plain copy to clipboard print ?
    1. < html >    
    2.   
    3.   < head >    
    4.   
    5. < head >    
    6.   
    7.   < body >    
    8.   
    9. < mce:script   type =”text/javascript”  >