关于JavaScript跨域问题的解决方案

Javascript出于安全性考虑，是不允许跨域调用其他页面的对象的。因此也就导致了在一些ajax应用中，使用跨域的web service成为问题。

这里整理了一些方法，来解决这个问题：

 1.设置document.domain。

前提条件：两个页面同属于一个基础域（例如都是xxx.com，或是xxx.com.cn）；同一协议（例如都是http）；同一端口（例如都是80）。

方法：设置两个页面的document.domain都设置为自己所在的基础域名。

原理：设置了document.domain，欺骗浏览器缺点：无法实现不同主域之间的通讯。并且当在一个页面中还包含有其它的iframe时，会产生安全性异常，拒绝访问。

存在问题：Firefox的兼容性问题

Firefox not yet solved --> document.domain and responseXML of XHR

例子：aaa.xxx.com里面的一个页面需要调用bbb.xxx.com里的一个对象，则将两个页面的document.domain都设置为xxx.com，就可以了。

主页面在主域：下，子页面在子域：demo.ioldfish.cn下，在两个页面的头部都加入如下代码：

<script type="text/javascript">
 document.domain="ioldfish.cn";
script>

2.在服务器端设置代理跨域的请求同样发送到本地服务器端，由服务器端的代理来请求相应的数据，然后发送给浏览器端。

例如：

html

function transTest(){
    var username = document.form1.username.value;
    var email = escape(document.form1.email.value);
    var url = ""+username+"&email="+email;
    url = encodeURI(url);

    var js_obj = document.createElement( "script" );
    js_obj.type = "text/javascript";
js_obj.setAttribute( "src" , url);
document.body.appendChild(js_obj);
}

function onServerResponse(responseText){
    alert(responseText);
    var message = document.getElementById("message");
    if(message.hasChildNodes()){
            message.removeChild(message.childNodes[0]);
    }
    var messagenode=document.createTextNode(responseText);//??????
    message.appendChild(messagenode);

}

registerCheckUserByAjax.do

1. UserInfoDTO userinfoDTO = (UserInfoDTO) serviceModel.get("userinfoDTO");   
2.         String responseText;   
3.         if(userinfoDTO==null){   
4.             responseText="成功";   
5.         }else if (userinfoDTO.getUserName().equals(username) && userinfoDTO.getEmail().equals(email)) {   
6.             responseText="失败";   
7.         } else {   
8.             responseText="成功";   
9.         }   
10.         responseText = new String(responseText.getBytes(), "ISO-8859-1");   
11.         response.getWriter().println("var a='" + responseText + "';");    
12.         response.getWriter().println("onServerResponse(a); ");   

这里去调JSP页面中的onServerResponse()方法，回显信息给本地。 这样本地网页就会响应服务器结果，通过message节点把服务器端信息给回显出来

3.使用apache服务器的mod_rewrite APACHE反向代理

1).原理介绍 所谓的代理是指代理用户的请求，而反向代理是指代理被用户请求。一个主动，一个被动的区别。如下图所示，对于代理服务器，用户1.2、1.3的请求都被代理服务器封装到1.1进行代理请求。当请求到达反向代理服务器10.1.1.11时，反向代理服务器并没有执行此请求，而交给了相应的应用服务器去处理，处理结果被封装到10.1.1.11并返回给192.168.1.1。正是由于处理结果被封装到了10.1.1.11，所以用户的浏览器上所识别的地址没有发生变化，一直是10.1.1.11。这便逃过了浏览器的“法眼”。

2). 部署方法下载 Apache web server 2.2，安装完成后，修改安装目录下的 conf/httpd.conf 文件，将以下两行前的注释字符 # 去掉。

#LoadModule proxy_module modules/mod_proxy.so

#LoadModule proxy_http_module modules/mod_proxy_http.so

 在conf/httpd.conf文件后添加

ProxyPass /fisher

ProxyPassReverse /fisher

ProxyPass /haven

ProxyPassReverse /haven

这样，

假设按照Apahche web server服务器的访问域名为

那么访问 实际访问的是

访问 实际访问的是

通过Apache Http server反向映射，用户的浏览器上所识别的地址一直是bwzss.botwave.com。这便逃过了浏览器的“法眼”。

haven.botwave.com

a.html

 

-----------------------------------------------------------------------------

fisher.botwave.com

b.html

 

这样，通过访问(实际跳转到)，点击页面的b按钮，就可以访问haven.botwave.com a页面的testA函数，点击页面的a按钮，就可以访问fisher.botwave.com b页面的testB函数。

 

存在问题：地址映射之后，必须修改页面中css，js文件的地址。