我有一个我正在做的 react 应用程序获取 对后端 API 的请求。
我正在尝试在 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”的“大小”和一些“毫秒”的时间。
我尝试了 - 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 中都能正常工作?
编辑 - 好的,使用 '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.
我不确定“强制缓存”如何为 chrome 工作,但这是我不需要的。
最佳答案
这是 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
我看到了一些替代方案:
希望这有帮助,祝你好运。
关于javascript - 谷歌浏览器不尊重缓存控制中的最大年龄,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60428116/