CORS请求

一、简介

CORS(跨域资源共享 Cross-origin resource sharing)是实现跨域的一种常用方式。实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信

二、CORS的两种请求

（1）简单请求（simple request）

（2）非简单请求（not-so-simple request）

简单请求必须同时满足以下两大条件：

1、请求方式是：GET、POST、HEAD中的一种

2、http请求头限制为这几种字段：Accept 、Accept-Language、Content-Language、Last-Event-ID、Content-Type：只限于三个值application/x-www-form-urlencoded（表单提交格式）、multipart/form-data（文件上传格式）、text/plain（纯文本格式）

凡是不同时满足上面两个条件，就属于非简单请求。

三、浏览器对简单请求的处理方式

对于简单请求，浏览器直接发出CORS请求。即在请求头信息之中，增加一个Origin字段（Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口））。

服务器通过Origin值来判断是否接受此次请求。

如果同意：则服务器返回响应

响应头会多出以下几个信息字段

Access-Control-Allow-Origin

Access-Control-Allow-Credentials

Content-Type: text/html

如果服务器拒绝：服务器会返回一个正常的HTTP回应（http状态吗有可能是200，所以无法通过状态码判断此类错误），响应头中不包含Access-Control-Allow-Origin字段，浏览器没有接收到Access-Control-Allow-Origin字段时就会抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。

四、浏览器对非简单请求的处理方式

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

CORS非简单请求会在正式通信之前，增加一次HTTP请求，称为“预检”请求。浏览器会先询问服务器，当前网页所在域名是否在服务器的许可名单之中，服务器允许之后，浏览器才会发出正式的XMLHttpRequest请求，否则会报错。

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

预检请求请求头一般包含这几个字段信息

1、Origin:   关键字段（必需），表示请求来自哪个源

2、Access-Control-Request-Method ：该字段是必需的，用来列出浏览器的CORS请求会用到哪些HTTP方法

3、Access-Control-Request-Headers：该字段可选，是一个用逗号分隔的字符串，指定浏览器CORS请求会额外发送的请求头信息字段

预检请求的回应：

（1）服务器确认允许跨源请求

服务器做出相应的响应，返回的响应头信息中包含以下几项重要信息字段：

1、Access-Control-Allow-Origin（该字段是必需的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。）

2、Access-Control-Allow-Methods（该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法）

3、Access-Control-Allow-Headers（如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段）

、Access-Control-Allow-Credentials（该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。）

5、Access-Control-Max-Age（该字段可选，用来指定本次预检请求的有效期，单位为秒。）

一旦服务器通过了“预检”请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样。

PS：如下两张图是“预检”请求和正式请求http的一些响应

图一、“预检”请求

图二、正式请求

（2）服务器不同意预检请求

如果浏览器否定了"预检"请求，会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段。这时，浏览器就会报出以下错误：

XMLHttpRequest cannot load ...（这里是要访问的来源）


Origin ...（这里是要访问的来源） is not allowed by Access-Control-Allow-Origin.