我有一个 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);
});
我正在跟踪检查缓存的流程-
在 Firefox 的网络选项卡中检查时,我可以看到“已传输”为“已缓存”,并且页面加载和一切都按预期工作有了显着改进。
但是,在 Chrome 中我仍然可以看到“大小”为“3.9 KB”,时间为“ms”。
我尝试了 - Chrome 是否忽略 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 “默认”是我需要的缓存模式,但我不确定为什么它不能跨 Chrome 工作
有人可以指导我正确的方向吗?需要做什么才能使其在 Firefox 和 Chrome 中都能工作?
编辑 - 好的,使用“缓存”作为“强制缓存”在谷歌浏览器和火狐浏览器中都有效。
来自 - https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/
“默认”是指下载资源时使用浏览器的默认行为。 Firefox 和 chrome 的默认行为是否不同?由于这是浏览器的默认行为,因此取决于浏览器如何使用它。
还有,
“force-cache”意味着如果在缓存中找到匹配的条目,浏览器将始终使用缓存的响应,而忽略响应的有效性。因此,即使在缓存中找到了非常旧的响应版本,也将始终在不进行验证的情况下使用它。
我不确定“force-cache”如何在 chrome 上工作,但这是我不需要的。
这是 2011 年报告的 chrome/chromium 问题,目前仍处于开放状态:
使用自签名 SSL 证书,Chrome 完全忽略所有缓存指令,并始终重新加载所有内容。
https://bugs.chromium.org/p/chromium/issues/detail?id=103875
我看到了一些替代方案:
希望这有帮助,祝你好运。
我通过在服务器端设置 Cache-Control 解决了这个问题