http请求发生两次（原来是options请求）

ゝ一纸荒年。 2021-08-31 10:35 612阅读 0赞

*  OPTIONS 请求的作用以及由来
 *  哪些场景会出现 OPTIONS 请求
 *  如何处理每次请求都要 OPTIONS ，从而导致 2 次重复网络请求开销的问题

--------------------

### 作用及由来 ###

先简单回顾一下跨域请求，当一个资源从与该资源本身所在的服务器**不同的域、协议或端口**请求一个资源时，此时会发起一个跨域 HTTP 请求。针对跨域，有多种解决方案，不展开说，不是今天的重点。

其中有一种方式叫做”跨域资源共享“（Cross-origin resource sharing），准确的说是一个W3C标准，可以克服同源策略的限制。

针对CORS请求，浏览器将其分成两个类型：**简单请求和非简单请求**，后面会展开说。

针对非简单请求，浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证等相关数据）。

### OPTIONS 请求场景 ###

首先我们需要区分一下简单请求跟非简单请求之间的差异。

只要满足下图（图片来自MDN）的条件，就是简单请求，反之为非简单请求。

![format_png][]

针对非简单请求的CORS请求，会在正式通信之前，额外增加一次 HTTP 请求，称为"预检"请求（preflight），以获知服务器是否允许该实际请求，避免跨域请求对服务器产生未预期的影响。

如下图所示，第一次是 OPTIONS 预请求，第二次才是真实的请求。

![format_png 1][]

![format_png 2][]

很明显，如果我们不进行优化处理，只要是非简单请求，每一次都会出现先发一次 OPTIONS 预请求，然后才是真实请求，这样明显是不合理的。

### 解决方案 ###

有两种方式可以来处理，我们分别来看看。

（1）全部用简单请求

这种方式不太行得通，毕竟现在大多数的场景都是非简单请求，例如我们需要自定义一些 header 等很多场景都会导致请求为非简单请求。

（2）Access-Control-Max-Age

Access-Control-Max-Age 这个响应头表示预请求的返回结果，即 Access-Control-Allow-Methods / Access-Control-Allow-Headers 可以被缓存多久，单位为秒。

例如下图，是怪怪用 koa 写的小例子，后端统一设置 Access-Control-Max-Age，就不会重复打 OPTIONS 请求了。

![format_png 3][]

## ##

[format_png]: /images/20210813/f9441939a20c4536a0afa1988295c09d.png
[format_png 1]: /images/20210813/8bdf6d4762d84768a47602e41b115f10.png
[format_png 2]: /images/20210813/1082e8ae673148b1b11a3fc601f015db.png
[format_png 3]: /images/20210813/a0e4fd54c2fb4f668f9aea2431d0102f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，612人围观）

还没有评论，来说两句吧...

相关阅读

相关【HTTP】如何避免OPTIONS请求？

> 场景：在调用后端接口的时候会出现两次请求：OPTIONS请求和GET请求。OPTIONS请求耗费了一定的时间，需减少OPTIONS请求。查找原因是浏览器对简单跨域请求和

淡淡的烟草味﹌/ 2024年02月19日 18:08/ 0 赞/ 80 阅读

相关 OPTIONS请求：解析HTTP中的神秘请求

OPTIONS请求：解析HTTP中的神秘请求 1. 引言在Web开发中，我们经常遇到各种各样的HTTP请求方法，如GET、POST、PUT和DELETE等。然而，

今天药忘吃喽~/ 2023年10月14日 15:12/ 0 赞/ 75 阅读

相关 http请求发生了两次（options请求）

前言自后台restful接口流行开来，请求了两次的情况（options请求）越来越普遍。笔者也在实际的项目中遇到过这种情况，做一下整理总结。 ![img][] 文

刺骨的言语ヽ痛彻心扉/ 2023年10月01日 12:21/ 0 赞/ 30 阅读

相关 HTTP请求方法OPTIONS预检请求

浏览器对简单跨域请求和复杂跨域请求的处理区别。浏览器对复杂跨域请求在真正发送请求之前,会先进行一次预请求,就是参数为OPTIONS的第一次请求,他的作用是用于试探性的服务器

秒速五厘米/ 2023年06月30日 09:22/ 0 赞/ 17 阅读

相关 http预请求options

在有很多情况下,当我们在js里面调用一次ajax请求时,在浏览器那边却会查询到两次请求,第一次的Request Method参数是OPTIONS,还有一次就是我们真正的请求,比

不念不忘少年蓝@/ 2023年06月22日 13:41/ 0 赞/ 51 阅读

相关 http预请求options

在有很多情况下,当我们在js里面调用一次ajax请求时,在浏览器那边却会查询到两次请求,第一次的Request Method参数是OPTIONS,还有一次就是我们真正的请求,比

末蓝、/ 2023年06月19日 02:15/ 0 赞/ 20 阅读

相关 HTTP的请求方法OPTIONS

HTTP请求方法并不是只有GET和POST，只是最常用的。据RFC2616标准（现行的HTTP/1.1）得知，通常有以下8种方法：OPTIONS、GET、HEAD、POST、P

客官°小女子只卖身不卖艺/ 2022年06月06日 02:58/ 0 赞/ 288 阅读

相关如果让Post请求发送一次options请求。

使用spring开启CORS支持，对于在头请求中添加了token，以至于请求变成复杂请求，由于不想让客户端每个都发一个OPTIONS预检测，后台可以配置Access-Contr

曾经终败给现在/ 2022年05月20日 01:40/ 0 赞/ 272 阅读

相关 AJAX中出现两次请求，OPTIONS请求和GET请求

转载、参考： http://levy.work/2016-09-01-why-got-options-request-via-ajax/ http://blog.csdn.

太过爱你忘了你带给我的痛/ 2022年02月13日 15:21/ 0 赞/ 345 阅读

相关 http请求发生两次（原来是options请求）

OPTIONS 请求的作用以及由来哪些场景会出现 OPTIONS 请求如何处理每次请求都要 OPTIONS ，从而导致 2 次重复网络请求开销的问题 -

ゝ一纸荒年。/ 2021年08月31日 10:35/ 0 赞/ 613 阅读