为主页设置缓存 headers 后强制浏览器重新加载

Question

我有一个 SPA，在启动时不小心设置了缓存 headers，不仅是为了资产，也是为了域上的主页（比如 www.mysite.com）。

我的 JS 和 CSS 资产是版本化的，它们在构建时正确地获得了唯一的文件名以破坏缓存，但问题是，因为我的主页也是 browser-cached，访问者永远不会得到更新后 HTML。他们总是得到旧 HTML 请求旧资产。

我现在已经修复了 headers，但是之前访问过我网站的所有用户都得到了旧版本，即使他们在浏览器中单击“重新加载”也是如此。当我打开 DevTools 并单击“清空缓存和硬重新加载”时，我设法强制执行它，但这不是我的用户通常会做的。所以问题是——在缓存 headers 设置一次后，我是否有机会强制浏览器重新加载域上的主页？

以下是老访客获得的headers。我假设 max-age=86400 让他们在第二天重新加载页面，但显然情况并非如此，因为即使是一周前访问过我的人仍然得到旧版本。

access-control-allow-origin: *
cache-control: public, max-age=86400
content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Fri, 21 Aug 2020 09:43:58 GMT
etag: W/"95e-173e97039b2"
last-modified: Thu, 13 Aug 2020 20:08:32 GMT
server: nginx/1.17.3
status: 200
vary: Accept-Encoding
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-powered-by: Express
x-xss-protection: 1; mode=block

非常感谢您的建议。

Answer 1

所以最后我设法通过添加修改后的 etag header 来修复它。看起来将 cache-control 切换到 no-store 并从整体上删除 etag 并没有帮助，但是 cache-control: no-store 和 etag 具有不同的值会强制测试Chrome 浏览器重新加载。

为主页设置缓存 headers 后强制浏览器重新加载

Force browsers reload after cache headers were set for home page

browser-cache

http-headers