现代浏览器忽略<meta http-equiv="Cache-Control">，尤其对index.html完全无效；真正有效的是服务端（如Nginx精确匹配location = /index.html）返回含no-store的HTTP响应头。
meta 标签里的 Cache-Control 对现代浏览器基本无效，尤其对 index.html 完全不起作用——别再把它当真了。
为什么 <meta http-equiv="Cache-Control"> 在 Chrome/Firefox/Edge 里不生效
主流浏览器自 2016 年起就明确忽略该标签对 HTML 的缓存控制指令。它只在极少数旧版 IE 中有有限支持。DevTools Network 面板里能看到：哪怕写了 <meta http-equiv="Cache-Control" content="no-store">，index.html 的响应头里依然没有 Cache-Control 字段，浏览器照常走 from memory cache。
常见误判现象：
- 改完 Vue/React 项目重新部署，用户刷新页面仍是白屏或旧逻辑
- Network 面板里
index.html显示status: 200 (from memory cache)，但响应头空空如也 - 点「返回」按钮看到跳转前的旧状态，不是新版本
index.html 必须用 Nginx location = /index.html 精确匹配加响应头
真正起作用的只有服务端返回的 HTTP 响应头。Nginx 是最常用场景，配置必须满足三个硬性条件：
立即学习“前端免费学习笔记（深入）”；
- 必须用
location = /index.html（等号精确匹配），不能写location ~* \.html$，否则会误伤其他 HTML 文件 - 必须显式设置三类头：
Cache-Control、Pragma、Expires，缺一不可 - 推荐用
no-store而非no-cache：前者禁止任何副本留存，后者仍缓存并可能返回304，SPA 场景下极易白屏
正确示例：
location = /index.html {
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
add_header Pragma "no-cache";
add_header Expires "0";
add_header Last-Modified $date_gmt;
}开发阶段验证是否真的禁用了缓存
别只看 Network 面板的「Size」列显示 from memory cache ——那是假象。关键看两点：
- 点击
index.html请求 → Headers → Response Headers → 确认出现Cache-Control: no-store等字段 - Status Code 必须是
200，而不是304或200 (from memory cache) - F5 刷新不可靠，要用
Ctrl+Shift+R硬刷新，或新开无痕窗口测试 - 检查 CDN 或反向代理（如 Cloudflare）是否透传了你设的头，它们常默认覆盖或删掉
add_header
meta 标签唯一能起作用的场景
它只在两种边缘情况下有点用：
- 纯静态文件托管（如 GitHub Pages、Vercel 静态模式），且你完全无法改服务端配置时，可作为临时补救
- 仅对直接输入 URL 回车加载的 HTML 生效，对
window.location.href跳转、pushState、后退按钮等行为零影响 - 必须配合
<meta http-equiv="Pragma">和<meta http-equiv="Expires">才算完整，单写Cache-Control更没用
真正要上线的 SPA，meta 标签只是心理安慰。核心动作永远只有一件：让服务端对 /index.html 这个路径返回带 no-store 的响应头。
