谷歌浏览器不尊重缓存控制中的最大年龄

Question

我有一个 React 应用程序，其中我正在向后端 API 执行提取请求。\n我正在尝试在 UI 端实现大量请求的缓存。

\n\n

我能够在 Mozilla Firefox 中成功完成此操作，并且运行得非常好。\n但是 chrome 给我带来了困难。\n这是我试图实现的代码片段 -

\n\n

        fetch(URL, {\n            signal: this.abortController.signal,\n            cache: "default",\n            headers: {\n                "Cache-Control": "max-age=120"\n            }\n        })\n            .then(response => return response.json())\n            .catch(error => {\n                if (error.name === "AbortError") {\n                    return;\n                }\n                this.setError(error);\n            });\n

\n\n

我正在跟踪检查缓存的过程-

\n\n

\n
1. 首先打开正在执行获取请求的选项卡。
\n
2. 将选项卡更改为不同的选项卡。
\n
3. 在超时期限（120 秒）内返回步骤 1 中提到的选项卡
\n

\n\n

在检查 Firefox 的网络选项卡时，我可以看到“已传输”为“已缓存”，并且页面加载和一切都按预期工作有显着改进。

\n\n

然而，在 Chrome 中，我仍然可以看到“大小”为“3.9 KB”，时间为“毫秒”。

\n\n

我尝试了 - Chrome 是否忽略 Cache-Control: max-age?中提到的步骤 没有任何成功。

\n\n

我还发现 - https://www.mnot.net/blog/2017/03/16/browser-caching说

\n\n

\n

Chrome 仅支持请求中 max-age=0，且仅支持值为 0。它不支持 min-fresh 或 max-stale。

\n

\n\n

但它有点旧了（2017 年），我不确定它是否仍然成立。

\n\n

另外，查看 Fetch 规范 - https://fetch.spec.whatwg.org/#concept-request-cache-mode \n\'default\' 是我需要的缓存模式，但我不确定为什么会这样无法跨 Chrome 工作

\n\n

有人可以指导我正确的方向吗？需要做什么才能使其在 Firefox 和 Chrome 中都能工作？

\n\n

编辑- 好吧，使用“缓存”作为“强制缓存”在谷歌浏览器和火狐浏览器中都有效。

\n\n

来自 - https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/

\n\n

\n

\xe2\x80\x9cdefault\xe2\x80\x9d 表示下载资源时使用浏览器的默认行为。\n firefox 和 chrome 的默认行为是否不同？由于这是浏览器的默认行为，因此取决于浏览器如何使用它。

\n

\n\n

还，

\n\n

\n

\xe2\x80\x9cforce-cache\xe2\x80\x9d 表示如果在缓存中找到匹配条目，浏览器将始终使用缓存的响应，忽略响应的有效性。因此，即使在缓存中找到了非常旧的响应版本，也将始终在不进行验证的情况下使用它。

\n

\n\n

我不确定“force-cache”如何在 chrome 上工作，但这是我不需要的。

\n

Answer 1

这是 2011 年报告的 chrome/chromium 问题，目前仍然悬而未决：

使用自签名 SSL 证书，Chrome 完全忽略所有缓存指令，并始终重新加载所有内容。

https://bugs.chromium.org/p/chromium/issues/detail?id=103875

我看到了一些替代方案：

• 您可以成为 CA，以 CA 身份签署您的证书，然后在 chrome 权限中导入此 CA（在 chrome://settings/certificates 中），请参阅 让 Chrome 接受自签名本地主机证书以了解更多详细信息。这是我目前使用的解决方案。
• 使用 Letscrypt 的免费 ssl 证书。它对我不起作用，因为我使用.docker域，它不是有效的公共后缀，因此无法获得证书。
• 您可以使用 http url 而不是 https 进行缓存测试，但 Chrome 会触发混合内容错误，您需要在 Chrome 设置中禁用该错误。
• 只需使用 Firefox 进行缓存测试即可。

希望这有帮助，祝你好运。