避免http请求发两次，一次options一次get

最新推荐文章于 2025-09-25 11:00:24 发布

原创最新推荐文章于 2025-09-25 11:00:24 发布 · 9.6k 阅读

14 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

38 篇文章

订阅专栏

本文探讨了解决跨域问题时遇到的非简单请求现象，详细解释了为何带有自定义header或application/json的请求会被标记为非简单请求，并触发预检请求。文章进一步介绍了如何通过设置Access-Control-Max-Age来缓存预检请求结果，减少后续请求的次数，提高效率。

其实就是非简单请求现象，其实就是一个解决跨域问题后的一个遗留问题，先看现象

为毛呢，这个就得先从啥是“非简单请求”开始说起，其实就是header里边带了自定义数据后，浏览器会默认你这个请求为“非简单请求”，会向后端先行发送一个“options”类型的请求，只有这个请求被通过了，跨域问题就解决了。(顺带说一下，application/json也会触发这个玩意，所以跨域嘛，是必须的，基础增删查改外类型也会触发)

但是，这就导致每次解决跨域都需要先发送一次“options”请求，也就是所谓的两次请求。那如何避免呢，这个嘛，看这个的估计都是前端吧，不过很可惜，我并不知道有前端解决的方法，毕竟我不能不带token，不过后端的倒有一个。

就是后端在请求的返回头部添加：

Access-Control-Max-Age：时间。

数值代表preflight request （预检请求）的返回结果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息）可以被缓存多久，单位是秒。

比如说：将预检请求的结果缓存10分钟：

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

Access-Control-Max-Age方法对完全一样的url的缓存设置生效，多一个参数也视为不同url。也就是说，如果设置了10分钟的缓存，在10分钟内，所有请求第一次会产生options请求，以后就只发送真正的请求了。