为什么HTML页面设置的meta禁止缓存标签不生效，页面仍从缓存加载？

• 你在HTML meta标签里设置的缓存指令优先级远低于服务器实际返回的HTTP响应头：浏览器收到HTML文件时会先读取响应头完成缓存策略决策，等解析到head里的meta标签时，缓存规则已经生效，meta的配置无法覆盖之前的决策。
• 你在开发者工具里看到的Cache-Control: max-age=0是服务器返回的真实响应头值，这个值的作用是浏览器每次使用缓存前都要向服务器校验资源是否更新，若资源未变更会返回304状态码复用缓存，不符合你要求的完全不从缓存加载的需求。

你需要在服务端配置HTML文件的响应头，覆盖当前的max-age=0配置：

1. Nginx 服务器配置 #

在站点配置的location块中添加以下规则：

location ~* \.html$ {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

配置完成后重载Nginx生效。

2. Apache 服务器配置 #

在站点根目录的.htaccess文件中添加以下规则：

<FilesMatch "\.html$">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</FilesMatch>

3. 静态托管/CDN配置 #

如果使用云厂商静态托管、CDN服务，直接在平台的自定义响应头配置页，针对.html后缀的文件配置上述3个响应头即可。

注意：配置完成后如果使用了CDN，需要先刷新CDN的缓存，再清理本地浏览器缓存测试效果，避免旧的缓存规则影响验证。

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