单页应用配置缓存头与文件版本化仍被Chrome缓存问题咨询

• HTML的<meta>标签配置的缓存规则优先级极低，Chrome等现代浏览器会优先采用HTTP响应头返回的Cache-Control规则，你在HTML头部加的meta配置本质上不会生效。
• 你贴出的响应头中存在重复的Cache-Control字段，第一个字段配置了max-age=31536000（即强制缓存一年），虽然HTTP规范要求多个Cache-Control头合并时取限制最严格的规则，但Chrome的部分版本对重复头的处理存在异常，会优先识别到前面的长缓存配置，导致缓存规则失效。
• 你贴出的响应头Content-Type为application/json，并非单页应用的入口HTML文件的响应头。如果你的入口index.html没有单独配置禁用缓存的响应头，即使静态资源做了版本化，被缓存的旧版HTML依然会加载旧版本的资源路径，表现为应用整体被缓存。
• 你看到的「no-cache、no-store、must-revalidate同时使用会冲突」的说法是错误的，该组合是W3C规范中推荐的完全禁用缓存的标准配置，不存在规则冲突。

• 先删除响应头中重复的Cache-Control: max-age=31536000配置，只保留Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0即可。
• 单独给单页应用的入口index.html配置上述禁用缓存的响应头，已经做了版本化的静态资源（js、css、图片等）可以保留长缓存配置，不必禁用缓存。
• 不需要依赖HTML的meta缓存标签，所有缓存规则统一在服务端响应头中配置即可。

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