CloudFront托管的index.html遭本地浏览器缓存滞留问题排查

1. Chrome根路径缓存特殊处理：Chrome对域名根路径（/）的缓存逻辑和具体文件路径（比如/index.html）不一样，哪怕你设置了Cache-Control: no-cache; max-age=0，如果用户本地磁盘里已经存了旧缓存，在没主动刷新的情况下，Chrome会直接用本地缓存，根本不向服务器验证更新。
2. BFCache（后退/前进缓存）搞鬼：你说查看源代码是新内容但页面显示旧的，这是典型的BFCache问题——Chrome会把用户之前访问过的页面状态存在内存里，再次访问时直接恢复旧的DOM，哪怕新的HTML已经拿到了，也不重新渲染。
3. CloudFront缓存策略不匹配：虽然你给S3文件设了Cache-Control，但CloudFront的根路径行为可能没正确继承这个头，或者根路径的缓存规则和/*的不一样，导致根路径返回的响应还是带旧缓存标识。

• 调整Cache-Control头：把S3里index.html的Cache-Control改成no-cache, must-revalidate, max-age=0，must-revalidate会强制浏览器必须去服务器验证缓存有效性，不能私自用旧缓存。如果能接受完全不缓存，也可以用no-store（但会影响性能）。
• 单独失效根路径：除了/*，单独对/执行CloudFront失效操作，确保CloudFront节点的根路径缓存彻底清掉。
• 加代码处理BFCache：在新的index.html里加一段JS，监听页面从BFCache恢复的事件，强制刷新：

window.addEventListener('pageshow', (e) => {
  if (e.persisted) window.location.reload();
});

• 检查CloudFront行为设置：确认根路径对应的CloudFront行为是“使用源缓存头”，别用自定义缓存策略覆盖了S3的设置。同时要保证CloudFront转发了S3的ETag和Last-Modified头，让浏览器能正确验证缓存是否过期。
• 用Clear-Site-Data强制清缓存：在CloudFront或S3给index.html加Clear-Site-Data: "cache"响应头，强制浏览器清掉这个域名的本地缓存（注意这个头会清所有缓存，谨慎用）。

内容的提问来源于stack exchange，提问作者JHH