注册
登录

您现在的位置是:首页 > 学无止境

#HTML5 & JS TIPS# 合法解决纯JS+

木木彡82 2013-11-29 15:09:01 1427人围观
转载自:http://www.flextheworld.com/2013/01/html5-js-crossdomain.html

随着云端技术的不断发展与普及,越来越多的团队或公司开始将应用开发的注意力转移到前端。当下最大的前端市场无疑是移动应用。但随着HTML与JS技术的不断发展,纯Ja...

转载自:http://www.flextheworld.com/2013/01/html5-js-crossdomain.html

随着云端技术的不断发展与普及,越来越多的团队或公司开始将应用开发的注意力转移到前端。当下最大的前端市场无疑是移动应用。但随着HTML与JS技术的不断发展,纯JavaScript + HTML5 的web应用数量也在不断增长。这就引发出在以往网站中不太会出现的情况。 JS跨域问题,因为纯JS前端并不一定和后端服务在同一台设备上,或者说他们也许并不通过同一域名访问,因为你的后端也许只是一个云服务。而你的前端也许正部署在一个使用者(开发者)的设备上。而目前所有的浏览器都不会允许你从域名abc向域名xyz发起AJAX访问。

这其实是一个老问题,不过如果你在google里搜索一下 “jQuery跨域” 或者”js跨域”会发现大多数的内容只是一个workaround,并不是真正“合法”的解决跨域问题。如果熟悉其他前端技术比如Flash, Sliverlight的朋友会知道,用Flash开发前端,如果需要跨域,需要在服务器端配置一个crossdomain.xml文件用于描述允许哪些域名可以跨域访问本服务器,这就是所谓的“合法授权”。

而如果你搜索了上面提到的关键字,会发现一半的网站告诉你用getJSON解决跨域,另外一些提到iframe,proxy等其他一些办法,好吧,这些都只是在浏览器允许的范围内,从一些并不真正提供API的网站获取内容的办法。这与我们上面提到的corssdomain.xml文件授权有本质区别,那如何让你的网站可以提供API供外部Web应用使用呢?在HTML5环境下,我们有了合法的解决方式

方法很简单,我们提供的跨域API服务会有两种情况,简单跨域以及复杂跨域(暂且叫复杂跨域吧)

我们先来说简单跨域

实现方法和crossdomain.xml类似,需要对外网域名授权,这样JavasScript的ajax操作就可以跨域访问服务器提供的API服务:

1. 服务器端在Response的header中需要加入下面几句

Access-Control-Allow-Origin: *  //(*代表所有网站,可以设置特定网站如:http://www.xxx.com)

Access-Control-Request-Method: POST, GET, PUT, DELETE //允许跨域使用的方法

Access-Control-Request-Headers: Authorization, Content-Type, xxxxxx (XXX代表自定义Header)

2.  Done. 第一步就可以了,当服务器API在Response的Header中包括上面3句的话,客户端就可以对服务器进行跨域访问了。

 

复杂跨域

所谓复杂跨域是相对简单跨域而言,当服务器对外提供API云服务时,往往需要进行用户验证。当使用HTTP AUTHORIZATION 验证方式时,我们可以说这种情况是复杂跨域,因为每一个客户端的Request实际包含两个Request( Preflight Request 和 Real Request.),当进行用户验证时,在真正的Request发出之前,浏览器会发出一个类型为OPTIONS的Request,如果服务器没有正确处理这个请求,那么跨域访问还是会失败。解决方法很简单,增加两行代码。

除了简单跨域时需要添加的几个header以外,添加下面的代码来处理OPTIONS Request。我以PHP代码为例:

if ($_SERVER['REQUEST_METHOD'] == ‘OPTIONS’) {

header(‘Access-Control-Allow-Origin: *’);

header(‘Access-Control-Allow-Headers: Authorization,Content-Type’);

exit;

当收到OPTIONS请求时,需要告诉浏览器,服务器API允许带有Authorization请求。

 

相关链接: Using Cros – HTML5 Rocks(http://www.html5rocks.com/en/tutorials/cors/


文章评论

  • 登录后评论

点击排行