Google chrome 不遵守 Cache-Control 中的 max-age

Question

我有一个 React 应用程序，我正在其中对后端 API 执行 fetch 请求。我正尝试在 UI 端针对大量请求实施缓存。

我能够在 Mozilla Firefox 中成功完成它，并且工作得非常好。但是 chrome 让我很难过。这是我要实现的一段代码 -

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

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

首先打开正在执行获取请求的选项卡。
将选项卡更改为其他选项卡。
Return 在超时期限（120 秒）内返回步骤 1 中提到的选项卡

在 Firefox 的网络选项卡中检查时，我可以看到 'Transferred' 为 'cached'，并且页面加载有了显着改善，一切都按预期工作。

但是，在 Chrome 中，我仍然可以看到带有“3.9 KB”的 'Size' 和带有一些 'ms' 的时间。

我尝试了 - Is Chrome ignoring Cache-Control: max-age? 中提到的步骤，但没有成功。

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

Chrome only supports max-age=0 in requests, and only with the value 0. It does not support min-fresh or max-stale.

但它有点老了（2017 年），我不确定它是否仍然适用。

此外，查看 Fetch 规范 - https://fetch.spec.whatwg.org/#concept-request-cache-mode 'default' 是我需要的缓存模式，但我不确定为什么它不能跨 chrome

谁能指导我正确的方向？需要做什么才能使其在 firefox 和 chrome 中工作？

EDIT - 好的，使用 'cache' 作为 'force-cache' 在 google chrome 和 firefox 中都有效。

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

“default” means use the default behavior of browsers when downloading resources. Is the default behavior different for firefox and chrome ? Since it is default behavior of a browser, it upto browser how they use this.

此外，

“force-cache” means that the browser will always use a cached response if a matching entry is found in the cache, ignoring the validity of the response. Thus even if a really old version of the response is found in the cache, it will always be used without validation.

我不确定 'force-cache' 如何为 chrome 工作，但这是我不需要的东西。

Answer 1

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

With self-signed SSL certificates, Chrome completely ignores all caching directives, and always reloads all content.

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

我看到了一些替代方案：

您可以成为 CA，以 CA 身份签署您的证书，并将此 CA 导入 chrome 机构（在 chrome://settings/certificates），请参阅 Getting Chrome to accept self-signed localhost certificate 更多细节。 这是我目前使用的解决方案。
在 Letsencrypt 中使用免费的 ssl 证书。它对我不起作用，因为我使用 .docker 域并且它不是有效的 public 后缀，因此无法获得证书。
您可以使用 http url 而不是 https 进行缓存测试，但 Chrome 会触发混合内容错误，您需要在 chrome 设置中将其禁用。
只需使用 Firefox 进行缓存测试。

希望这对您有所帮助，祝您好运。

Google chrome 不遵守 Cache-Control 中的 max-age

Google chrome not respecting max-age in Cache-Control

javascript

google-chrome

fetch

browser-cache

reactjs