跨域资源共享CORS详解

一、CORS是什么

cors全称为跨域资源共享（Cross-origin resource sharing），是一个W3C协议

二、为什么要有CORS

浏览器发送AJAX请求时，会受到同源策略的限制，为了安全起见，同源政策规定，AJAX请求只能发给同源的网址，否则就报错。所谓同源，是指同协议，同域名，同端口。为了突破这一限制，同时又保证安全，给出了一种解决方案--CORS
关于同源策略，推荐阅读阮一峰的这篇文章：浏览器同源政策及其规避方法

三、详解

知道了CORS是什么以及为什么要有这个东西之后，接下来谈一谈CORS如何实现
要实现CORS需要客户端（浏览器）和服务器都进行配置，现代浏览器大多都实现了CORS（IE10以上），在日常使用过程中，与同源的AJAX通信没什么区别，整个过程都由浏览器自动进行，所以实现CORS的关键还在于服务器是否实现了CORS接口。

两种请求

浏览器将CORS请求分为两种：简单请求和非简单请求
下面将分别介绍两种请求的基本流程：

1.简单请求

同时满足以下条件的CORS请求称为简单请求：

一、请求方法为一下三种中的一种：
　　１.HEAD
　　 2. POST
　　 3.GET
二、HTTP头信息不超过以下几种字段：
　　1.Accept
　　2.Accept-Language
　　3.Content-Language
　　4.Last-Event-ID
　　5.Content-Type只限于这三个：application/x-www-form-urlencoded、multipart/form-data、text/plain

基本流程：
1.浏览器发现此次跨域AJAX请求为简单请求，则直接发送一个CORS请求，即浏览器自动在头信息中增加一个Origin字段，这个origin字段说明了此次请求来自哪个源（协议、域名、端口）
下面是一个例子

GET /user/login HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

2.服务器收到此次请求之后，通过头部的origin字段，判断是否同意这次请求，如果这个origin在服务器允许的范围内，则同意此次请求，返回相应的请求的数据，同时在返回的头信息中添加几个字段(不限于以下这两个)，浏览器发现头信息中有Access-Control-Allow-Origin字段（见下面），就知道请求成功了。这里列出了两个比较重要的头信息：

Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Allow-Credentials: true

CORS请求有关的头信息都以Access-Control开头
（1）Access-Control-Allow-Origin
　 该字段是必须的，它说明了服务器允许的源，一般是请求时origin的值，或者是*，表示接受来自任何源的访问
（2）Access-Control-Allow-Credentials
　该字段是可选的，它的值是一个布尔值，表示是否允许请求携带cookies和HTTP认证信息，因为CORS请求默认不发送cookies和HTTP认证信息，如果需要的话，则需要服务器指定此头部值为true，并且在AJAX请求中将withCredntials属性设置为true。如果发送cookies，出于安全考虑，则Access-Control-Allow-Origin的值不能为*。cookies也遵守同源策略，即只有本域设置的cookies才能发送。

如果不同意，即origin不在许可范围内，就返回一个正常的HTTP响应，不包含任何与CORS相关的头信息，浏览器接收到响应之后，发现没有Access-Control-Allow-Origin字段，就知道失败了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。因为即使不在许可范围内仍然会返回一个正常的HTTP响应，所以这种错误不能通过状态码判断，因为有可能是200。

2.非简单请求

非简单请求是指一些特殊的请求，比如PUT，DELETE这种
基本流程
1.浏览器检测到此次请求为非简单请求，则会先发送一次“预检”请求，类型为OPTIONS，向服务器查询是否支持此次请求的源，以及支持哪些方式和头信息字段，下面是一个预检请求的例子

OPTIONS /user/login HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Access-Control-Request-Method: PUT
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Access-Control-Request-Headers: axios-header,content-type
Accept: /
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9

"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。
除了Origin字段，"预检"请求的头信息包括两个特殊字段。
（1）Access-Control-Request-Method
该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。
（2）Access-Control-Request-Headers
该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是axios-header,content-type

2.服务器在收到了此次预检请求后，检查Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段，发现符合范围，就可以做出回应：

HTTP/1.1 204 No Content
Vary: Origin
Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Max-Age: 5
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Content-Type,Authorization,Accept,axios-header
Date: Thu, 27 Dec 2018 09:28:16 GMT
Connection: keep-alive

上面的回应中比较重要的是Access-Control-Allow-Origin，表示允许此源请求数据，也可以用*b表示允许任意源请求数据。

如果浏览器否定了"预检"请求，会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段。这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。

3.当通过了“预检”请求之后，浏览器每次正常的CORS请求都会简单请求一样

四、总结

明白了上面的流程之后，可以用一张流程图来表示一下CORS的基本流程

3236727274-5a37338316b31_articlex.png