浏览器-OPTIONS 预请求

1. HTTP一共有八种常见请求方法

1. get：参数在url上，浏览器长度有限制，不安全
2. post：参数不可见，长度不受限制
3. put：上传最新内容到指定位置
4. delete：删除请求的url所表示的资源
5. head：不返回相应主体，主要用于客户端查看服务器性能
6. options：与head类似，是客户端用于查看服务器的性能 。JavaScript的XMLHttpRequest对象进行CORS跨域资源共享时，就是使用OPTIONS方法发送嗅探请求，以判断是否有对指定资源的访问权限
7. connect：http1.1预留的，将连接方式改为管道方式，通常用于SSL加密服务器的链接与 HTTP非加密的代理服务器之间的通信
8. trace：请求服务器[回显收到的请求信息]主要用于HTTP请求的测试或诊断
9. patch：出现的较晚，用于更新局部的资源，不存在时，会创建一个新的(http1.1之后使用的较多的)

2. 什么是预请求

请求分为简单请求和预检请求，options请求也称为预检请求，也可以说是复杂请求（可能对服务器数据产生副作用的HTTP请求方法，如put，delete都会对服务器数据进行更修改，所以浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求）。
如果我们发送的跨域请求为“非简单请求”，浏览器会在发出此请求之前首先发送一个请求类型为OPTIONS的“预检请求”，验证请求源是否为服务端允许源，这些过程对于开发者来说是感觉不到的，由浏览器代理。

3. options作用

1. 获取服务器支持的HTTP请求方法；也是黑客经常使用的方法。
2. 用来检查服务器的性能。例如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个options请求头，用以判断实际发送的请求是否安全。

4. 什么情况下发生？（以下都属于复杂请求）

1. 请求方法不是 get、head、post
2. content-type不是 application/x-www-form-urlencoded、multipart/form-data、text/plain
3. 请求设置了自定义的header字段

5. 优化OPTIONS请求：Access-Control-Max-Age 或者 避免触发

一旦达到触发条件，跨域请求便会一直发送2次请求，这样增加的请求数是否可优化呢？答案是可以，OPTIONS预检请求的结果可以被缓存。

Access-Control-Max-Age这个响应首部表示 preflight request （预检请求）的返回结果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息） 可以被缓存的最长时间，单位是秒。(MDN)

如果值为 -1，则表示禁用缓存，每一次请求都需要提供预检请求，即用OPTIONS请求进行检测。

6. 请求的过程

1. 请求头中的字段

1. 预检请求头request header的关键字段

   Request Header	作用
   Access-Control-Request-Method	告诉服务器实际请求所使用的 HTTP 方法
   Access-Control-Request-Headers	告诉服务器实际请求所携带的自定义首部字段，本次实际请求首部字段中content-type为自定义

2. 预检响应头response header的关键字段

   Response header	作用
   Access-Control-Allow-Methods	返回了服务端允许的请求，包含GET/HEAD/PUT/PATCH/POST/DELETE
   Access-Control-Allow-Credentials	允许跨域携带cookie（跨域请求要携带cookie必须设置为true）
   Access-Control-Allow-Origin	允许跨域请求的域名，这个可以在服务端配置一些信任的域名白名单
   Access-Control-Request-Headers	客户端请求所携带的自定义首部字段content-type

2.简单请求

浏览器判断跨域为简单请求时候，会在Request Header中添加 Origin （协议 + 域名 + 端口）字段 ， 它表示我们的请求源，服务端会将该字段作为跨源标志。

服务端接收到此次请求后 ， 首先会判断Origin是否在允许源（由服务端决定）范围之内，如果验证通过，服务端会在Response Header 添加 Access-Control-Allow-Origin、Access-Control-Allow-Credentials等字段。

必须字段：

Access-Control-Allow-Origin：表示服务端允许的请求源，*标识任何外域，多个源 , 分隔

可选字段：

Access-Control-Allow-Credentials：false 表示是否允许发送Cookie。设置为true，同时ajax请求设置withCredentials = true，浏览器的cookie就能发送到服务端；

3. 非简单请求

进行非简单请求时候 ， 浏览器会首先发出类型为OPTIONS的“预检请求”，服务端对“预检请求”处理，并对Response Header添加验证字段，客户端接受到预检请求的返回值进行一次请求预判断，验证通过后，主请求发起。

4 总结：

预检请求通过后，主请求与简单请求一致。

非简单请求需要服务端对OPTIONS类型的请求做处理。

如果Request Headers中设置了自定义这个属性，如Authorization ，所以预检请求的Request Headers中的Access-Control-Request-Headers的值也要追加 Authorization

参考链接：

1. Header增加字段导致跨域OPTIONS请求不成功
2. 什么时候会发送options请求