http://www.ruanyifeng.com/blog/2016/04/cors.html

1：cors是什么

CORS是一种w3c的标准，主要是用来解决浏览器跨域请求的。它允许浏览器对跨源服务器发起请求（浏览器本身是禁止跨域请求）。现在所有的浏览器都实现了这个标准。

2：两种请求方式

浏览器将跨域请求（CORS）分为简单请求和非简单请求。对于简单请求和非简单请求，浏览器的处理机制是不一样的。

同时满足以下两种条件，便是简单请求，否则是非简单请求

1）：请求方法是：HEAD、GET、POST

2）：HTTP的请求头信息不超过以下几种字段

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

3：简单请求

对于简单请求，浏览器会在请求头之中添加一个字段（Origin），这个字段标示了这个请求来自于哪个源（协议+域名+端口）

例子如下：

GET /cors HTTP/1.1

Origin:http://api.bob.com

Host:api.alice.com

Accept-Language:en-US

Connection:keep-alive

User-Agent:Mozilla/5.0...

服务端在接收这个请求后，根据Origin这个字段的值，判断本次的请求的源是否在许可范围内。

如果不在许可范围内，那么返回一个正常的HTTP请求。浏览器接收到请求后，会根据请求头中是否有Access-Control-Allow-Origin这个字段，来判断本次跨域请求是否成功

如果没有，则会抛出一个错误。被XMLHttpRequest的onerror回调函数捕获。

注意：这个错误不能通过状态码判断，因为服务器的状态码有可能是200

如果有，那么响应头会多出以下一个字段

Access-Control-Allow-Origin:http://api.bob.com

Access-Control-Allow-Credentials:true

Access-Control-Expose-Headers:FooBar

Content-Type:text/html; charset=utf-8

Access-Control-Allow-Origin：这个字段是必须的，一般返回两个值，要么是请求时Origin字段的值，要么是*，代表了服务器接收任意域名的请求

Access-Control-Allow-Credentials：这个字段是可选的，是一个布尔值。代表了服务器是否允许客户端发送cookie。如果这个字段设置为true，那么跨域请求时，cookie可以被包含在请求中。如果不允许客户端发送cookie，删除这个字段即可。

Access-Control-Expose-Headers：可选字段。XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段，如果要获取更多的字段，需要在这个字段中指定属性名。

浏览器跨域发送cookie withCredentials 属性

withCredentials：这个属性的意思是是否允许跨域请求携带cookie

如果客户端要跨域发送cookie给服务器，仅仅依靠服务器返回的Access-Control-Allow-Credentials这个字段设为true是不够的，还需要客户端在发起ajax请求时，打开withCredentials属性，否则就算服务器要求客户端携带cookie也没用

varxhr=new XMLHttpRequest();

xhr.withCredentials=true;

注意：如果要发送cookie，Access-Control-Allow-Origin这个字段就不能写*号，必须明确指定于请求网页一致的域名。同时，cookie依然遵循同源策略，只有使用服务器域名设置的cookie才会上传，其他域名的cookie并不会上传。同时，在原网页（跨源网页）中使用代码（document.cookie）也无法读取到服务器域名下的cookie。

4：非简单请求

非简单请求是对服务器有特殊要求的请求，比如，请求方法是PUT或者DELETE，或者Content-Type字段的值是application/json。

浏览器对于非简单请求的处理方式是，在请求之前，先发送一个询问，这个询问的内容就是当前网页的域名是否在服务器的可信任名单之内，以及客户端的请求方法、请求头中的字段信息是否可以使用，得到肯定答复后，浏览器就会发起请求，否则就是报错。

浏览器的预检请求如下

OPTIONS /cors HTTP/1.1

Origin:http://api.bob.com 

Access-Control-Request-Method:PUT 

Access-Control-Request-Headers:X-Custom-Header

Host:api.alice.com

Accept-Language:en-US

Connection:keep-alive

User-Agent:Mozilla/5.0...

预检请求的方式是OPTIONS方法，表示这个请求时用来询问的。

Origin： 标示这个请求的源

Access-Control-Request-Method：这次请求的方法

Access-Control-Request-Headers：浏览器cors请求中的额外的头字段信息

浏览器预检请求的回应：

服务器在接收到预检请求后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

HTTP/1.1 200 OK

Date: Mon, 01 Dec 2008 01:15:39 GMT

Server: Apache/2.0.61 (Unix)

Access-Control-Allow-Origin: http://api.bob.com

Access-Control-Allow-Methods: GET, POST, PUT

Access-Control-Allow-Headers: X-Custom-Header

Content-Type: text/html; 

charset=utf-8

Content-Encoding: gzip

Content-Length: 0

Keep-Alive: timeout=2, max=100

Connection: Keep-Alive

Content-Type: text/plain

Access-Control-Max-Age:1728000

上面请求中关键字段如下：

Access-Control-Allow-Origin：允许哪些地址可以跨源， 星号表示允许任意浏览器发起任意跨源请求

Access-Control-Allow-Methods：允许哪些方法可以跨源请求，这个值是一个字符串，代表的是所有可以跨源请求的方法，并不是只返回这次的方法。

如果浏览器的预检请求被拒绝了，那么浏览器正常返回，但是没有关于origin的字段信息，那么浏览器就会判断出服务器拒绝了本次请求，就会报错。

浏览器的正常请求和回应：

当浏览器的预检请求通过后，浏览器以后的cors请求都会带上origin字段，服务器返回的头信息中也都会带上Access-Control-Allow-Origin字段。

与JSONP比较：

JSONP只支持get请求，cors支持所有的请求方式，但是jsonp 的兼容性好。支持老式的浏览器。

总结：

cors是一种w3c的标准，用来支持跨域请求的。cors规定，请求分为简单请求和非简单请求

对于简单请求来说，每次请求的时候浏览器会自动在请求头中加上源服务器（Origin）字段，这个字段标示了本次请求的源，服务器会通过这个值判断是否允许这个源服务器进行跨域请求，如果允许会正常响应本次请求。并且在响应头中添加允许哪些源进行跨域请求（Access-Control-Allow-Origin）字段如果不允许，正常响应请求，但是没有origin字段。浏览器在接收到本次响应时，会通过响应头中是否有Access-Control-Allow-Origin字段，来判断本次请求是否成功，没有浏览器会抛出一个错误。

对于非简单请求，浏览器会在请求之前发出预检请求，本次请求包含三个字段，分别是源服务器字段、需要在请求头中添加的字段、请求的方法。浏览器在接收到预检请求后，如果服务器允许，会返回允许哪些源进行跨域请求、允许哪些方法进行跨域请求、允许添加哪些头进行跨域请求三个字段。如果服务器拒绝，正常响应本次请求，但是没有关于origin字段的信息。浏览器会根据是否有这些信息，进而判断本次请求是否可以跨域。

当浏览器预检请求通过后，之后的每次请求都会在请求头中添加源地址，在响应头中添加允许跨域的源地址字段

疑问：

1：对于简单请求来说，如果服务器不支持本次请求，会正常响应本次请求，那么这次响应时返回null？还是带数据正常返回。个人猜测：正常返回，只不过浏览器会拦截显示报错

2:  对于简单请求来说，在访问时服务器时返回这个字段Access-Control-Allow-Credentials，标示是否允许带上cookie，但是这个时候请求已经发生了服务器再返回这个字段有什么意义。。所以个人猜测这个字段应该是为了告诉浏览器本次请求携带的cookie是否生效了。或者说下次请求的时候不要带。而浏览器是否带cookie请求由withCredentials 决定

3: 对于非简单请求，预检请求可以被缓存，所以每次跨域请求，浏览器都会从缓存中取出上次的预检请求进行比对。