当前位置: 首页 > 科技观察

面试官:说说你对optionsrequest的理解

时间:2023-03-21 01:45:17 科技观察

什么是optionsrequest?我们可以在MDN中看到一段描述:★HTTP的OPTIONS方法用于获取目标资源支持的通信选项。客户端可以对特定URL或整个站点(通过将URL设置为“*”)使用OPTIONS方法。”简单来说,就是可以通过optionsrequest来嗅探出某个请求在对应的服务器中支持哪种请求方式。在前端,我们一般不会主动发起这个请求,但是往往可以在浏览器发起了两次请求,如图:其实这是因为在跨域的情况下,是在浏览器发起“复杂请求”的时候发起的,跨域共享标准规范要求,那些可能对服务器数据产生副作用的HTTP请求方法(特别是GET以外的HTTP请求,或者带有某些MIME类型的POST请求),浏览器必须先使用OPTIONS方法发起预检请求(preflightrequest)才能知道是否服务器允许跨域请求,服务器确认权限后,才发起实际的HTTP请求,简单请求和复杂请求,有些请求不会触发CORS预检请求,此类请求是ge通常称为“简单请求”,而触发预检的请求称为“复杂请求”。简单请求的请求方式为GET、HEAD或POST,规范集中的header字段是人为设置的,如Accept/Accept-Language/Content-Language/Content-Type/DPR/Downlink/的值Save-Data/Viewport-Width/WidthContent-Type限制为以下三种之一,即application/x-www-form-urlencoded、multipart/form-data、text/plain请求中的任何XMLHttpRequestUpload对象不注册任何事件监听器;请求中没有使用ReadableStream对象。复杂请求使用以下任一HTTP方法,PUT/DELETE/CONNECT/OPTIONS/TRACE/PATCH人为设置以下集合之外的头字段,即简单请求之外的Content-Type字段的值不属于以下之一,即application/x-www-form-urlencoded,multipart/form-data,text/plainoptionskeyrequestheaderfieldkeyfieldofrequestheaderkeyfieldroleAccess-Control-Request-Method通知服务器实际请求会使用POST方法Access-Control-Request-Headers通知服务器实际请求会携带自定义请求头域如:Access-Control-Request-Method:POSTAccess-Control-Request-Headers:X-PINGOTHER,Content-Typeresponse头的关键字段key字段作用Access-Control-Allow-Methods表示服务器允许客户端使用什么方法发起请求Access-Control-Allow-Origin允许跨域请求的域名,如果你想要所有ow所有域名,设置为*Access-Control-Allow-Headers通过实际请求中携带的header字段告诉服务器Access-Control-Max-Age指定preflight请求请求的结果能缓存多久Options请求优化当我们发起跨域请求时,如果是简单的请求,我们只会发送一次请求,如果是复杂的请求,我们会先发送一个options请求确认目标资源是否支持跨域Domain,那么浏览器会根据服务器的响应头自动处理剩余的请求。如果响应支持跨域,则继续发送正常请求。如果不支持,它将在控制台上显示错误。由此可见,当触发预检时,一次跨域请求会发送两次请求,不仅增加了请求次数,而且延迟了请求真正发起的时间,严重影响性能。因此,我们可以对Options请求进行优化,主要有两种方式。转换为简单的请求,比如使用JSONP作为跨域请求缓存options请求,并在服务器端设置Access-Control-Max-Age字段,那么当第一次请求该URL时,一个OPTIONS请求会被发送,浏览器会根据返回的Access-Control-Max-Age字段缓存请求的OPTIONS预检请求的响应结果(具体缓存时间也取决于浏览器支持的默认最大值,取两者中的最小值,一般为10分钟)。在缓存有效期内,对该资源的请求(具有相同的URL和标头字段)将不再触发预检。(chrome打开控制台可以看到服务器响应Access-Control-Max-Age时,只有第一个请求会有pre-check,后面就不会了。注意需要开启缓存和removethedisablecachecheck.)总结选项request是一个预检请求,可以用来检测服务器允许的http方法。当发起跨域请求时,出于安全考虑,当触发某些条件时,浏览器会在正式请求之前自动发起一个OPTIONS请求,即CORS预检请求。如果服务器接受了跨域请求,浏览器会继续发起正式请求。