#HTML5 & JS TIPS# 合法解决纯JS+HTML5前端简单跨域与复杂跨域问题

转载自：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/）