关于 options 请求的理解 【转载】
原文:https://mp.weixin.qq.com/s/Fs9NO5mpcHQdDXrRn0P2JQ
参考文章:https://www.cnblogs.com/qunxiadexiaoxiangjiao/p/9446956.html
什么是 options 请求
HTTP 的 OPTIONS 方法用于 获取目的资源所支持的通信选项 。客户端可以对特定的URL使用 OPTIONS方法，也可以对整站(通过将 URL 设置为 * ) 使用方法
简单来说，就是可以用 options 请求去嗅探某个请求在对应的服务器中都支持哪些请求方法。
在前端中，我们一般不会主动发起这个请求，但是往往你可以看到浏览器中相同请求发起了2次
image
其实，这是因为在跨域的情况下，在浏览器发起 "复杂请求" 时主动发起的。跨域共享标准规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法 （特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个 预检 请求 （prefilght request），从而获知服务器是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。
简单请求与复杂请求
某些请求不会触发 CORS 预检请求，这样的请求一般称为 简单请求。 而会触发 预检 的请求则称为复杂请求
简单请求
- 请求方法为
GET HEAD POST时发起的请求 - 认为设置了规范集合之内的首部字段，如:
Accept/Accept-Language
Content-Language/Content-Type
DPR/Downlink/Save-Data
Viewport-Width/Width
-
Content-Type的值仅限于下列三者之一，如:
application
x-wwww-form-urlencoded/multipart
form-data text/plain
- 请求中的任意
XMLHttpRequestUpload对象均没有注册任何时间监听器 - 请求中没有使用
ReadableStream对象
简单请求的部分响应头解释
(必含) Access-Control-Allow-Origin - 不可省略，否则请求按失败处理。该项控制数据的可见范围 所有人可见设为*
(可选) Access-Control-Allow-Credentials - 该项标志着请求当中是否包含 cookies 信息，只有一个可选值 true。如果没有 cookies 则省略该项。这一项与XmlHttpRequest2对象当中的withCredentials属性，即withCredentials 为 true 时。该项也要为 true
(可选) Access-Control-Expose-Headers - 该项确定XmlHttpRequest2对象当中getResponseHeader()方法所能获得的额外信息。通常情况下，getResponseHeader()方法只能获得如下的信息：
- Cache-Control
- Content-Language
- Content-Type
- Expires
- Last-Modified
- Pragma
当你需要访问额外的信息时，就需要在这一项用逗号隔开
任何不满足上述要求的请求，都属于复杂请求。比如 DELETE PUT等 HTTP 请求。或者 Content-Type:application/json内容
复杂请求
复杂请求表面上看起来和简单请求使用差不多，但是实际上浏览器会发送两个请求，(1) 最先发的是一种预请求。此时作为服务端也要返回预回应。预请求实际上是对服务端的一种权限请求，只有当预请求成功返回，实际请求才开始执行。
预请求以 OPTIONS 形式发送，当中同样包含域，并且还包含了两项 CORS 特有的内容 ( request )
Access-Control-Request-Method – 该项内容是实际请求的种类，可以是GET、POST之类的简单请求，也可以是PUT、DELETE等等。
Access-Control-Request-Headers – 该项是一个以逗号分隔的列表，当中是复杂请求所使用的头部。
如
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER,Content-Type
显而易见，这个预请求实际上就是在为之后的实际请求发送一个权限请求，在预回应返回的内容当中，服务端应当对这两项进行回复，以让浏览器确定请求是否能够成功完成。
复杂请求的部分响应( response )头及解释如下：
| 关键字段 | 作用 |
|---|---|
| (必选) Access-Control-Allow-Methods | 表明服务器允许客户端使用什么方法发起请求 ( 所有可用的方法，并缓存起来 ) |
| (必选) Access-Control-Allow-Origin | 允许跨域请求的域名，如果要允许所有域名则设置为 * |
| Access-Control-Allow-Headers （当预请求中包含Access-Control-Request-Headers时必须包含） | 这是对预请求当中Access-Control-Request-Headers的回复，和上面一样是以逗号分隔的列表，可以返回所有支持的头部 |
| Access-Control-Max-Age | 指定了预检请求的结果能够被缓存多久 |
| (可选) Access-Control-Allow-Credentials | 和简单请求当中作用相同 |
一旦预回应如期而至，所请求的权限也都已满足，则实际请求开始发送。
options 请求优化
当我们发起跨域请求时，如果是简单请求，那么我们只会发出一次请求，但是如果是复杂请求则先发送 options 请求，用于确认目标资源是否支持跨域，然后浏览器会根据服务器响应的 header 自动处理剩余的请求，如果响应支持跨域，则继续发起请求，如果不支持则在控制台显式错误。
由此可见，当触发预检时，跨域请求便会发送2次请求，既增加了请求的数，也延迟了请求真正发起的时间，严重影响性能。
所以我们可以优化 Options 请求。
主要有以下2种方式:
- 转为简单请求，如用 JSONP 做跨域请求
- 对 options 请求进行缓存，服务端设置
Access-Control-Max-Age字段，那么当第一次请求该 URL 时会发出OPTIONS 请求，浏览器会根据返回的 Access-Control-Max-Age 字段缓存该请求的 OPTIONS 预检请求的响应结果 （具体缓存时间取决于浏览器的支持的默认最大值，取两者最小值，一般为10分钟）。
在缓存有效期内，该资源的请求（URL 和 header 字段都相同的情况下）不会再触发预检。
chrome 打开控制台可以看到，当服务器响应 Access-Control-Max-Age 时只有第一次请求会有预检，后面不会了。注意要开启缓存，去掉 disable cache 勾选。
总结
options 请求就是预检请求，可用于检测服务器允许的 http 方法。
当发起跨域请求时，由于安全原因，触发一定条件时浏览器会在正式请求之前自动先发起 OPTIONS 请求，即 CORS预检请求，服务器若接受该跨域请求，浏览器才继续发起正式请求。
网友评论