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

Question

我有一个 React 应用程序，我在其中向后端 API 发出 fetch 请求。 我正在尝试在 UI 端实现缓存以应对繁重的请求。

我能够在 Mozilla Firefox 中成功完成，并且运行良好。 但是铬让我很难过。 这是我正在尝试实现的一段代码-

        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);
            });

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

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

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

但是，在 Chrome 中，我仍然可以看到“3.9 KB”的“大小”和一些“毫秒”的时间。

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

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

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

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

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

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

编辑 - 好的，使用 'cache' 作为 'force-cache' 可以在 google chrome 和 firefox 中使用。

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

“默认”是指在下载资源时使用浏览器的默认行为。 firefox 和 chrome 的默认行为是否不同？由于它是浏览器的默认行为，它取决于浏览器如何使用它。

还有，

“force-cache”意味着如果在缓存中找到匹配的条目，浏览器将始终使用缓存的响应，而忽略响应的有效性。因此，即使在缓存中找到了一个非常旧的响应版本，它也将始终在未经验证的情况下使用。

我不确定“强制缓存”对 chrome 的作用，但这是我不需要的。

Answer 1

这是 2011 年报告的铬/铬问题，并且仍然存在：

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

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

我看到了一些替代方案：

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

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