简单请求和复杂请求

简单请求与复杂请求的概念

在涉及到CORS的请求中，咱们会把请求分为简单请求和复杂请求。知足如下条件的请求即为简单请求：

请求方法：GET、POST、HEAD
除了如下的请求头字段以外，没有自定义的请求头
Accept
Accept-Language
Content-Language
Content-Type
DPR
Downlink
Save-Data
Viewport-Width
Width
Content-Type的值只有如下三种(Content-Type通常是指在post请求中，get请求中设置没有实际意义)
text/plain
multipart/form-data
application/x-www-form-urlencoded

非简单请求即为复杂请求。复杂请求咱们也能够称之为在实际进行请求以前，须要发起预检请求的请求。

预检请求(OPTIONS请求)

为何要发预检请求

咱们都知道浏览器的同源策略，就是出于安全考虑，浏览器会限制从脚本发起的跨域HTTP请求，像XMLHttpRequest和Fetch都遵循同源策略。
浏览器限制跨域请求通常有两种方式：

1. 浏览器限制发起跨域请求
2. 跨域请求能够正常发起，可是返回的结果被浏览器拦截了

通常浏览器都是第二种方式限制跨域请求，那就是说请求已到达服务器，并有可能对数据库里的数据进行了操做，可是返回的结果被浏览器拦截了，那么咱们就获取不到返回结果，这是一次失败的请求，可是可能对数据库里的数据产生了影响。
为了防止这种状况的发生，规范要求，对这种可能对服务器数据产生反作用的HTTP请求方法，浏览器必须先使用OPTIONS方法发起一个预检请求，从而获知服务器是否容许该跨域请求：若是容许，就发送带数据的真实请求；若是不容许，则阻止发送带数据的真实请求。

预检请求的特殊性

1、OPTIONS不会携带请求参数和cookie,也不会对服务器数据产生反作用

2、Access-Control-Request-Method和Access-Control-Request-Headers

//预检请求请求头
OPTIONS /resources/post-here/ HTTP/1.1
Host: bar.other
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

首部字段 Access-Control-Request-Method 告知服务器，实际请求将使用 POST 方法。首部字段 Access-Control-Request-Headers 告知服务器，实际请求将携带两个自定义请求首部字段：X-PINGOTHER 与 Content-Type。服务器据此决定，该实际请求是否被容许。

3、OPTIONS请求响应头

响应头
Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

首部字段 Access-Control-Allow-Methods 代表服务器容许客户端使用 POST,GET 和 OPTIONS 方法发起请求。

首部字段Access-Control-Allow-Headers 代表服务器容许请求中携带字段X-PINGOTHER 与Content-Type。与 Access-Control-Allow-Methods同样，Access-Control-Allow-Headers的值为逗号分割的列表。

最后，首部字段

Access-Control-Max-Age 代表该响应的有效时间为 86400 秒，也就是 24 小时。在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，若是该首部字段的值超过了最大有效时间，将不会生效。
预检请求完成以后，发送实际请求