js跨域访问解决方案总结

2010CN-CNIC-CSDBTanFei[Js跨域访问解决方案总结]在js中XMLHttpRequest对象是AJAX-web应用的核心，我们在编写web应用的客户端脚本的时候，可以利用该对象来进行异步请求,以提高web应用的用户体验。但是XMLHttpRequest对象进行跨域的请求的时候，会受到浏览器的限制（浏览器本身的安全考虑）。本文总结了现有的两大类解决js跨域访问的方法：代理和动态script方式，简单阐述其原理并通过相应的实验来说明。1目录1、什么是跨域访问.................................................................................................................22、通过代理的方式来解决.....................................................................................................22.1、原理..............................................................................................................................22.2、利用Apache实现JS跨域访问...................................................................................32.2.1编译安装配置Apache.............................................................................................42.2.2利用mod_rewrite来实现跨域访问......................................................................42.2.3利用mod_proxy来实现跨域访问..........................................................................52.2.4测试.........................................................................................................................52.3、利用PHP实现JS跨域访问........................................................................................62.4、利用JSP实现JS跨域访问..........................................................................................63、动态script标签的方式......................................................................................................73.1、原理..............................................................................................................................73.2、举例..............................................................................................................................84、其它方式.............................................................................................................................95、总结和建议.........................................................................................................................96、参考资料...........................................................................................................................1021、什么是跨域访问浏览器对于网络上的链接会有一些限制，这些限制包括对XMLHttpRequest的限制。网络浏览器不会允许脚本去对它本身所在的server之外的server进行连接。图1跨域访问示意图1在图1中，来自WebServer的脚本在客户端的WebBrowser中需要对其它（Yahoo）域下的service进行请求，那么就构成了跨域访问（对脚本所在的server之外的server—YahooWebService进行了访问），浏览器会拒绝对YahooWebService的请求。这就是js脚本的跨域访问问题。这样的问题在web开发中并不少见，比如在使用Yahoo提供的各种webservice的时候。通常有两大类方法用于解决跨域访问的问题：一类是采用代理的方式，一类是采用动态script标签的方式。2、通过代理的方式来解决2.1、原理该方式是在服务器上安装配置一个代理，不用XMLHttpRequest去直接请求需要的WebService，而是让其先请求代理，由代理去请求WebService，然后再将结果返回到客户端的脚本中去处理。这样就能保重XMLHttpRequest请求的是1图片来源于YahooDeveloper()3脚本所在的WebServer，数据也是从脚本所在的WebServer中获取的。整个过程如图2所描述的那样，如果客户端的js需要请求不在WebServer域下的第三方的WebService，其过程如下：1、由Client向WebServer发起异步请求；2、WebServer收到请求之后，交给代理（Proxy）；3、代理（Proxy）向WebService发起请求；4、WebService将接收、处理请求，并将结果返回给代理（Proxy）5、代理（Proxy）将结果返回给ClientClient的js只需要按照一定的规则将请求发给Proxy就可以了，对响应数据的接收和处理跟没有使用代理是完全一样的。图2基于proxy的跨域访问示意图如何在WebServer上构建Proxy？通过利用某些web服务器和脚本语言就能构建简单实用的Proxy。下面分别介绍利用Apache、PHP、JSP这三种方式，搭建一个满足AJAX跨域访的Proxy。2.2、利用Apache实现JS跨域访问利用Apache的重写(mod_rewrite)或者代理模块(mod_proxy)来将跨请求转发到你需要请求的WebService上面。对Apache进行简单的配置之后，客户端只需安照一定的方式来填写请求的url，Apache将自动处理好请求转发任务。【接下来的一段内容对于非Tomcat用户可以忽略】我们这边主要使用的是Tomcat，有必要说明下Apache和Tomcat的区别：Apache是一个web服务器，更是一个通用的应用平台，可以在该平台的基础之上再运行支持其它服务器端脚本语言的解释器，比如：PHP、ASP等；Tomcat是WebBrowserWebServerproxy1、XMLHttpRequest4、Response2、ProxyRequest3、ProxyResponseClientWebService4一个Web服务器，是一个Servlet（jsp最终也会被编译成Servlet）容器。通常可以将Apache和Tomcat整合到一起，由Apache负责处理响应的静态页面，由Tomcat负责处理jsp、servlet等动态页面，因为它们各自在处理对应的方面都具有优势。它们都是web服务器，不同的是Apache更多的是作为一个Web服务器的平台，而Tomcat侧重是作为一个Servlet的容器。Apache的APR（可移植运行时库，ApachePortableRuntime）提供了跨平台的操作系统抽象层和功能函数，提供了良好的API，可以在此基础上开发相应的模块，来完成web服务器处理过程中的功能，比如mod_mono模块，就是在APR的基础上开发出来的APS.NET页面的解析器。因为需要用Apache做Proxy，但是我们这边主要使用的是Tomcat，但是可以通过mod_jk模块将它们整合到一起，具体整合方法请参照后面的参考资料【1】。连接之后的Apache和Tomcat仍然可以看着两个单独的Web服务器单独地在服务器上运行，Apache在监听80端口，Tomcat在监听8080端口，它们之间通过Socket通信（进程之间通信比较常用的一种）。【穿插内容结束】接下来阐述如何用mod_rewrite或者mod_proxy来实现js的跨域访问：2.2.1编译安装配置Apache到网站：下载Apachehttpd的源码，然后参照文档【2】进行编译，需要注意的是：默认的编译过程是没有将mod_rewrite和mod_proxy编译进来，需要在configure的时候指定需要编译的模块：./configure--prefix=/usr/local/apache2\--enable-rewrite=shared\--enable-speling=shared\--enable-proxy\--enable-proxy-http\上面的命令指定了Apache的安装路径为：/usr/local/apache2；将rewrite、speling模块等编译到apache中。2.2.2利用mod_rewrite来实现跨域访问在apache的安装目录下的conf/httpd.conf文件的后面添上如下几句：LoadModuleproxy_modulemodules/mod_proxy.soLoadModuleproxy_http_modulemodules/mod_proxy_http.soLoadModulerewrite_modulemodules/mod_rewrite.soRewriteEngineOnRewriteRule^/proxy/(.*)$http://$1[P,L]第1、2、3句：告诉Apache在载入的时候装入相应的共享模块第4句：开启重写功能第5句：通过正则表达式指定重写规则。例如如下的url：=para1将被映射为：5=para1然后服务器就会自动去请求另外一个域下的servlet。关于正在表达式请参考【3】，关于RewriteRule的参数说明请参照【4】。2.2.3利用mod_proxy来实现跨域访问mod_proxy是用来将一个远端服务器映射到本地服务器的URL空间，这种方式没