一、什么是CORS？
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。它的通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
二、为什么要用CORS?
在需要做出一个技术决定时，我们常常需要给出适当的理由。就CORS而言，使用它的根本原因就是要完成资源的跨域访问，也就是如何绕过Same-origin Policy。
那么什么是Same-origin Policy呢？简单地说，在一个浏览器中访问的网站不能访问另一个网站中的数据，除非这两个网站具有相同的Origin，也即是拥有相同的协议、主机地址以及端口。一旦这三项数据中有一项不同，那么该资源就将被认为是从不同的Origin得来的，进而不被允许访问。
但是这个限制的确过于严格了：一个大型网站常常拥有一系列子域。在这些域之间交换数据就会受到Same-origin Policy的限制。为了绕过该限制，业界提出了一系列解决该问题的方法，例如：更改document.domain属性，跨文档消息，JSONP以及CORS等。这些解决方案各有各的长处，因此我们需要根据需求的不同来对这些方案进行选择。
2.1、更改document.domain属性
可以说更改document.domain属性的方法是最为直接快速的的方法，也较为常见。通过将从不同域中得到的脚本的document.domain属性设置为同一个值，就可以使得这些脚本之间可以相互交互。例如从“http://blog.ambergarden.com”得到的网页可以通过执行如下的脚本改变其document.domain属性中记录的所属域：
1 document.domain = 'aitouch.com';那么接下来，该脚本就可以访问ambergarden.com中的数据了。这种方法也有其自身的劣势，那就是软件开发人员不可以随便设置document.domain属性的值，至少在一些浏览器上是如此的。
2.2、跨文档消息
跨文档消息则是通过向Window实例发送消息来完成的。在使用时，软件开发人员需要通过调用一个Window的postMessage()函数来向该Window实例发送消息。此时Window实例内部的onmessage事件将被触发，进而使得该事件的消息处理函数被调用。但是在接收到消息的时候，消息处理函数首先需要判断消息来源的合法性，以避免恶意用户通过发送消息的方式来非法执行代码。
2.3、JSONP
JSONP则是通过在文档中嵌入一个<script>标记来从另一个域中返回数据。例如在页面中添加一个如下的<script>标记：
1 <script src="http://blog.ambergarden.com/someData?callback=some_func"/>该<script>标记会向http://blog.ambergarden.com/someData发送一个GET请求。在数据返回到客户端后，some_func()函数将会被调用。当然，这种方法拥有一个显著的缺点，那就是只支持GET操作。
三、CORS运行流程
CORS将导致跨域访问的请求分为两种：Simple Request（简单请求），not-so-simple request（非简单请求）
3.1、如果一个请求没有包含任何自定义请求头，而且它所使用HTTP动词是GET，HEAD或POST之一，那么它就是一个Simple Request。但是在使用POST作为请求的动词时，该请求的Content-Type需要是application/x-www-form-urlencoded，multipart/form-data或text/plain之一。
3.2、如果一个请求包含了任何自定义请求头，或者它所使用的HTTP动词是GET，HEAD或POST之外的任何一个动词，那么它就是一个not-so-simple request，也叫Preflighted Request（预检）。如果POST请求的Content-Type并不是application/x-www-form-urlencoded，multipart/form-data或text/plain之一，那么其也是Preflighted Request。浏览器发出CORS非简单请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
3.3、一般情况下，一个跨域请求不会包含当前页面的用户凭证。一旦一个跨域请求包含了当前页面的用户凭证，那么其就属于Requests with Credential。
3.4、现在我们就来看一个通过CORS来进行跨域访问的简单请求示例。假设ambergarden.com想从一个公有数据平台public-data.com中返回一些数据，那么在页面逻辑中，其可以通过下面的代码向public-data.com发送数据请求：
1 function retrieveData() {
2 var request = new XMLHttpRequest();
3 request.open('GET', 'http://public-data.com/someData', true);
4 request.onreadystatechange = handler;
5 request.send();
6 }在运行这段代码的之后，浏览器会向服务发送如下的请求：
1 GET /someData/ HTTP/1.1
2 Host: public-data.com
3 ......
4 Referer: http://ambergarden.com/somePage.html
5 Origin: http://ambergarden.com而一个支持CORS协议的服务可能会给出下面的响应：
1 HTTP/1.1 200 OK
2 Access-Control-Allow-Origin: http://ambergarden.com
3 Content-Type: application/xml
4 ......
5
6 [Payload Here]3.5、前面我们已经看过浏览器对Simple Request是如何进行处理的。那么接下来我们就来看看Preflight Request是如何执行的。相较于Simple Request，Preflight Request的运行流程则略为复杂一些。
假设现在我们要向公有数据平台public-data.com写入一些数据，那么我们就需要发送一个POST请求：
1 function sendData() {
2 var request = new XMLHttpRequest(),
3 payload = ......;
4 request.open('POST', 'http://public-data.com/someData', true);
5 request.setRequestHeader('X-CUSTOM-HEADER', 'custom_header_value');
6 request.onreadystatechange = handler;
7 request.send(payload);
8 }在执行了该段代码之后，浏览器首先发出的请求将如下所示：
1 OPTIONS /someData/ HTTP/1.1
2 Host: public-data.com
3 ......
4 Origin: http://ambergarden.com
5 Access-Control-Request-Method: POST
6 Access-Control-Request-Headers: X-CUSTOM-HEADER可以看到，我们首先发送的并不是POST请求，而是OPTION请求。该请求还通过Access-Control-Request-Method以及Access-Control-Request-Headers标示了请求类型以及请求中所包含的自定义HTTP Header。实际上，它相当于向服务端询问访问资源的权限：“您好，我想向你这里发送数据，你看可以吗？”。而在真正访问资源前发送一个请求进行探测也是该请求被称为是Preflight Request的原因。
在服务端看到该OPTIONS请求后，其将分析该请求中的内容并返回一个响应，以通知浏览器是否允许向它发送数据：
1 HTTP/1.1 200 OK
2 Access-Control-Allow-Origin: http://ambergarden.com
3 Access-Control-Allow-Methods: POST, GET, OPTIONS
4 Access-Control-Allow-Headers: X-CUSTOM_HEADER
5 Access-Control-Max-Age: 1728000
6 ......浏览器分析该响应并了解到其被允许向服务端发送数据以后，其才会向服务端发送真正的POST请求：
1 POST /someData/ HTTP/1.1
2 Host: public-data.com
3 X-CUSTOM-HEADER: custom_header_value
4 ......
5
6 [Payload Here]而服务端则会接收并处理该请求：
1 HTTP/1.1 200 OK
2 Access-Control-Allow-Origin: http://ambergarden.com
3 Content-Type: application/xml
4 ......
5
6 [Payload Here]最后一种请求Requests with Credential的运行流程则和前两种请求类似。只不过在发送请求的时候，我们需要将用户凭证包含在请求中：
1 function retrieveData() {
2 var request = new XMLHttpRequest();
3 request.open('GET', 'http://public-data.com/someData', true);
4 request.withCredentials = true;
5 request.onreadystatechange = handler;
6 request.send();
7 }而在服务端的响应中，其将拥有一个额外的Access-Control-Allow-Credentials响应头：
1 HTTP/1.1 200 OK
2 Access-Control-Allow-Credentials: true
3 Access-Control-Allow-Origin: http://ambergarden.com
4 Content-Type: application/xml
5 ......
四、配置项解释
4.1 Access-Control-Allow-Origin
该字段必填。它的值要么是请求时Origin字段的具体值，要么是一个*，表示接受任意域名的请求。
4.2 Access-Control-Allow-Methods
该字段必填。它的值是逗号分隔的一个具体的字符串或者*，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。
4.3 Access-Control-Expose-Headers
该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。
4.4 Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值，表示是否允许发送Cookie.默认情况下，不发生Cookie，即：false。对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json，这个值只能设为true。如果服务器不要浏览器发送Cookie，删除该字段即可。
4.5 Access-Control-Max-Age
该字段可选，用来指定本次预检请求的有效期，单位为秒。在有效期间，不用发出另一条预检请求。
注意: CORS请求发送Cookie时，Access-Control-Allow-Origin只能是与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。