跨域预检--options请求

2022-07-03  本文已影响0人  时间的溺水者
options 请求定义

浏览器基于CORS(跨域资源共享)机制,对于跨域 & 复杂的XMLHttpRequest和Fetch API请求,首先使用 options 方法向服务器发起一个预检请求(preflight request),即 CORS 预检请求,服务器若接受该跨域请求,浏览器才继续发起正式请求。

HTTP 的 OPTIONS 方法 用于获取目的资源所支持的通信选项。客户端可以对特定的 URL 使用 OPTIONS 方法,也可以对整站(通过将 URL 设置为"*")使用该方法。(简而言之,就是可以用 options 请求去嗅探某个请求在对应的服务器中都支持哪种请求方法)。

options 请求定义原因

这是因为在跨域的情况下,在浏览器发起"复杂请求"时主动发起的。跨域共享标准规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。
跨域问题详见前端跨域问题解决办法

什么是简单请求和复杂请求

某些请求会触发CORS预检请求,这样的请求一般称为 “复杂请求” ,而不会触发预检的请求则是 “简单请求” 。

1、请求方式为GET、HEAD、POST时的请求;
2、认为设置规范集合之内的首部字段,如Accept/Accept-Language/Content-Language/Content-Type/DPR/Downlink/Save-Data/Viewport-Width/Width;
3、Content-Type 的值仅限于下列三者之一,即application/x-www-form-urlencoded、multipart/form-data、text/plain;
4、请求中的任意 XMLHttpRequestUpload对象均没有注册任何事件监听器;
5、请求中没有使用 ReadableStream对象。

预检请求是预先检查服务器是否允许发起实际的请求,避免跨域请求对服务器的用户数据产生未预期的影响,让跨域更加的安全。

  1. 请求方法是OPTIONS
  2. 携带2个头部字段:
    Access-Control-Request-Method // 实际请求的方法
    Access-Control-Request-Headers // 实际请求携带的自定义请求头首部字段
Options 请求优化

当发起跨域请求时,简单请求只发起一次请求;复杂请求则需要2次,先发起options请求,确认目标资源是否支持跨域,浏览器会根据服务端响应的header自动处理剩余的请求,如果响应支持跨域,则继续发出正常请求;不支持的话,会在控制台显示错误。
所以,当触发预检时,跨域请求便会发送2次请求,增加请求次数,同时,也延迟了请求真正发起的时间,会影响性能。

优化options请求的两种方法:

上一篇下一篇

猜你喜欢

热点阅读