使用 jquery ajax 的两个 CORS 请求之间的时间间隔答案

【问题标题】：Time Interval between two CORS requests using jquery ajax使用 jquery ajax 的两个 CORS 请求之间的时间间隔
【发布时间】：2014-10-29 15:59:30
【问题描述】：

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

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

如果我在没有任何时间间隔的情况下连续进行 Web 服务调用（例如两个请求之间的间隔不到 1 秒），那么预飞行就丢失了。

如何避免每次都出现这种飞行前请求？

这个时间间隔是多少？

这是 Chrome 浏览器特有的吗？

【问题讨论】：

标签： javascript jquery ajax google-chrome http

【解决方案1】：

浏览器之间在实现预检缓存的方式上存在差异。不幸的是，仅 W3C 规范并不能解释您在飞行前缓存中观察到的细微差别。

对于阅读此问题的其他人，我想解释一下当 OP 说 飞行前请求时，他指的是在跨域 POST 请求之前的 OPTIONS 请求。 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);

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

回答您的问题：

我怎样才能避免每次飞行前的请求？

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

这个时间间隔是多少？

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

这是 Chrome 浏览器特有的吗？

是的，不同浏览器在如何实现预检缓存方面存在差异。 W3C 规范并未指定在 Web 浏览器中构建飞行前缓存功能所需的所有内容。

【讨论】：

坚实而具体的答案

【解决方案2】：

如果满足以下两种情况，浏览器将不会发出预检请求：

对于请求方法，要么存在方法缓存匹配，要么是简单方法且未设置强制预检标志。
对于作者请求标头的每个标头，要么有一个与字段名称匹配的标头缓存匹配，要么是一个简单标头。

此参考显示了使用 CORS 的用户代理（浏览器）职责：http://www.w3.org/TR/cors/#cross-origin-request-with-preflight-0

否则，您不必担心。浏览器实现会做正确的事情。

【讨论】：