javascript - 使用 jquery ajax 的两个 CORS 请求之间的时间间隔

Question

我正在使用 jQuery $.ajax 向 Web 服务发出 CORS 请求。按照标准，有一个飞行前请求，然后是实际的 POST 请求。

我注意到，每次我尝试进行 Web 服务调用时都会有两个请求(一个飞行前请求和一个实际的 POST 请求)，前提是两个请求之间有时间间隔。

如果我继续连续进行 Web 服务调用而没有任何时间间隔(例如两次请求之间的时间间隔小于 1 秒)，那么飞行前就丢失了。

我怎样才能每次都避免这种飞行前请求？

这个时间间隔是多少？

这是 Chrome 浏览器特有的东西吗？

Answer 1

不同浏览器在执行飞行前缓存的方式上存在差异。不幸的是，W3C 规范本身并不能解释您在飞行前缓存中观察到的细微差别。

对于阅读此问题的其他人，我想解释一下当 OP 说飞行前请求时，他指的是在跨源之前的 OPTIONS 请求POST 请求。 OPTIONS 请求用于查询 API 并确定哪些 HTTP 方法可用于跨源请求。通常，您希望看到对 OPTIONS 请求的这种类型的响应:

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, X-Requested-With
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT

由于您使用的是 Google Chrome，我将向您推荐 Webkit 源代码的适用部分:

https://github.com/WebKit/webkit/blob/master/Source/WebCore/loader/CrossOriginPreflightResultCache.cpp

默认的飞行前缓存超时为 5 秒:

static const auto defaultPreflightCacheTimeout = std::chrono::seconds(5);

最大值为 5 分钟:

static const auto maxPreflightCacheTimeout = std::chrono::seconds(600);

服务器可以使用响应 header 中的 Access-Control-Max-Age 字段为飞行前请求指定超时值，但是 Webkit浏览器强制执行 5 分钟的最大超时。

回答您的问题:

How can I avoid this pre flight request every time?

您需要在对 OPTIONS 请求的 API 响应 header 中将 Access-Control-Max-Age 设置为 600。

What is this time interval?

对于 Webkit 浏览器(即 Google Chrome)，默认超时值为 5 秒。这就是为什么您会在每个 POST 请求之前看到飞行前请求，但如果您快速提交 POST 请求，那么您将看不到额外的飞行前请求。

Is this something specific to Chrome browser?

是的，不同浏览器在运行前缓存的实现方式上存在差异。 W3C 规范并未指定在 Web 浏览器中构建飞行前缓存功能所需的一切。