天天看点

关于web应用中跨域问题的解决方案,并特别针对移动方向提出一些解决方案

由于浏览器的安全限制,网络连接的跨域访问时不被允许的,当然其中也包括了XmlHttpRequest。但是,有些时候我们需要通过跨域访问来获取一些资源,例如:

作为用户,我们需要在自己的网站用AJAX调用一些其他网站提供的服务,这些服务常常是一些HTTP GET形式的API。而AJAX的基础是XmlHttpRequest,跨域的XmlHttpRequest是不被允许的……

作为服务提供者,我们想让用户只是简单的在他们的网页中远程引用我们的脚本文件,并加入一些少量的html代码就能使用我们的服务,而不用在服务器端做任何的改变。当然,XmlHttpRequest也是行不通的。

用服务器端的XmlHttpRequest代理实现跨域访问

我们不能在浏览器端直接使用AJAX来跨域访问资源,但是在服务器端是没有这种跨域安全限制的。所以,我们只需要让服务器端帮我们完成“跨域访问”的工作,然后在浏览器端用AJAX获取服务器端“跨域访问”的结果就可以了。这就是所谓的在服务器端创建一个XmlHttpRequest代理,通过这个代理来访问其他域名下的资源。这里引用Yahoo! JavaScript Developer Center上的几张图来进一步说明这个方案:

使用XmlHttpRequest访问同一域名下的资源:

使用XmlHttpRequest访问同一域名下的资源

使用XmlHttpRequest跨域访问资源:

使用XmlHttpRequest跨域访问资源

用服务器端的XmlHttpRequest代理来跨域访问资源:

用服务器端的XmlHttpRequest代理来跨域访问资源

编写服务器端XmlHttpRequest代理的具体过程就不赘述了,无非是创建一个自定义的HTTP请求。

用动态script标签实现客户端的跨域访问

很明显,上一个方案必须要在服务器端做相应的改动才能实现跨域访问。但是有些时候,用户不能改动服务器端的源代码,而且更多的时候,用户并没有Web开发的基础,他们只会简单的复制、粘贴操作。这个时候,第一个方案就不能满足一个服务提供者的需求了。

我们应该能注意到,虽然浏览器有跨域访问的限制,但是我们是可以通过script标签远程引用其他域名下的脚本文件的。而且,script标签的src属性不一定必须是一个存在的js文件,也可以是一个http handler的url,只要这个http handler返回的是一个text/javascript类型的响应就可以了。

这样,我们的第二个方案就浮出水面了。只要让用户添加一个script标签,这个script标签的src属性指向我们api的url,并提供 api需要的一些参数,通常其中包括了一个作为callback的js函数名。针对这个脚本请求,我们服务器端的http handler会根据url中携带的参数,生成并返回相应的脚本,通常这个脚本的内容是调用callback函数,并传入用户需要的数据作为参数。于是,一个跨域访问的过程就完成了。下面是一个Yahoo! JavaScript Developer Center上提供的一个例子:

<html>

<head>

<title>How Many Pictures Of Madonna Do We Have?</title>

<script type="text/javascript">

function ws_results(obj) { alert(obj.ResultSet.totalResultsAvailable); }

</script>

<script type="text/javascript" src="http://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=Madonna&output=json&callback=ws_results"></script>

</head>

<body></body>

</html>

将这段代码复制到文本编辑器中,另存为xxx.html,再将另存到文件拖到浏览器中,就能看到效果了(网速慢的话需要等待一下)。在这个例子中,api 的url的callback参数指定了跨域访问成功后会调用的函数的名称,这个函数有一个参数,这个参数就是用户跨域访问需要的数据,通常是一个json 对象。

其他实现跨域访问的方案

除了上面两种方案之外,还有其他一下方法同样可以实现跨域访问,例如:

apache server的mod_rewrite模块或者mod_proxy模块可以帮你自动实现服务器端的XmlHttpRequest代理,你可以像调用当前域名下的资源一样的调用其他域名下的资源。

据说动态生成iframe也可以实现跨域调用,没有仔细研究过。

以上内容来次网站:http://dibrg.blog.163.com/blog/static/75984638200891411732891/

实际针对跨域的问题我们还有其它的解决方式。

1.如果我们结合本地调用,如在手机上,我们打包phoneGap,我们可以实现100%的Socket通讯和本地数据库功能

2.我们可以通过html5的WebSocket实现与服务器的通讯和服务端推功能

3.通过JsonP,JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。

继续阅读