cross-domain resource share

随着 Web2.0 和 SNS 的兴起，Web 应用对跨域访问的需求也越来越多，但是，在脚本中进行跨域请求是受安全性限制的，Web 开发人员迫切需要提供一种更安全、方便的跨域请求方式来融合（Mashup）自己的 Web 应用。这样做的一个好处就是可以将请求分摊到不同的服务器，减轻单个服务器压力以提高响应速度；另外一个好处是可以将不同的业务逻辑分布到不同的服务器上以降低负载。

值得庆幸的是，跨域请求的标准已经出台，主流浏览器也已经实现了这一标准。W3C 工作组中的 Web Applications Working Group（Web 应用工作组）发布了一个 Cross-Origin Resource Sharing（跨域资源共享，该规范地址：http://www.w3.org/TR/access-control/和http://dev.w3.org/2006/waf/access-control/） 推荐规范来解决跨域请求的问题。该规范提供了一种更安全的跨域数据交换方法。具体规范的介绍可以访问上面提供的网站地址。值得注意的是：该规范只能应用在类似 XMLHttprequest 这样的 API 容器内。IE8、Firefox 3.5 及其以后的版本、Chrome浏览器、Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范，已经可以进行跨域请求了。

Cross-Origin Resource Sharing 的工作方式是通过添加 HTTP 头的方法来判断哪些资源允许 Web 浏览器访问该域名下的信息。然而，对于那些 HTTP 请求导致用户数据产生副作用的请求方法（特别是对于除了GET、某些 MIME 类型的 POST 之外的 HTTP方法），该规范要求浏览器对请求进行“预先验”，通过发送 HTTP 的 OPTIONS 请求头询问服务器有哪些支持的方法，在征得服务器的同意后，再使用实际的 HTTP 请求方法发送实际的请求。服务器也可以通知客户端是否需要将验证信息（如 Cookie 和 HTTP Authentication 数据）随同请求一起发送。

1，简单请求

什么样的请求算是简单请求呢？简单请求必须满足下面2点：
a，只使用 GET、POST 进行的请求，这里的POST只包括发送给服务器的数据类型（Content-Type）必须是 application/x-www-form-urlencoded、multipart/form-data 或者 text/plain中一个。

b，HTTP 请求没有设置自定义的请求头，如我们常用的 X-JSON。

nginx 配置：

add_header Access-Control-Allow-Origin *;  // 表示服务器资源允许所有的外域访问

xmlhttprequest 访问方法：

var xhr = new XMLHttpRequest();
var method = 'GET';

// TODO: Implement error handling.
xhr.onreadystatechange = function() {
	if (4 === xhr.readyState) {
		callback(null, xhr.responseText);
	}
};
var uri = "http://172.22.139.126";//本地服务器的默认页面
xhr.open(method, uri);
xhr.send();
xhr.onreadystatechange = handler;

function handler(evtXHR) {   
    if (xhr.readyState == 4) {   
			if (xhr.status == 200) {   
			var response = xhr.responseText;   
			alert(response);
			} else {   
				alert("不允许跨域请求。");
			}   
    }   
	else {   
			alert('执行状态'+xhr.readyState);
	}   
}   
		

2，预检请求

预检请求首先需要向另外一个域名的资源发送一个 HTTP OPTIONS 请求头，其目的就是为了判断实际发送的请求是否是安全的。下面的2种情况需要进行预检：

a，不是上面的简单请求，比如使用Content-Type 为 application/xml 或 text/xml 的 POST 请求

b，在请求中设置自定义头，比如 X-JSON、X-MENGXIANHUI 等

在nginx 配置中，需要添加：

add_header Access-Control-Allow-Headers Content-Type;  //以及自定义的header头

被请求的页面，通知客户端允许预检请求。并设置缓存时间   

如配置：

  Response.AddHeader("Access-Control-Allow-Origin", "*");   
      Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");   
      Response.AddHeader("Access-Control-Allow-Headers", "POWERED-BY-andgexiong");   

参考 ： http://www.chinaz.com/program/2010/0111/103511.shtml