本文详解为何 Nginx 中使用 map + expires 无法可靠控制 index.html 缓存，以及如何通过 Cache-Control 实现跨浏览器、全场景（首次访问、软重载、硬重载）一致的强制不缓存策略。
本文详解为何 nginx 中使用 `map` + `expires` 无法可靠控制 index.html 缓存，以及如何通过 `cache-control` 实现跨浏览器、全场景（首次访问、软重载、硬重载）一致的强制不缓存策略。
在单页应用（SPA）部署中，index.html 是前端路由的入口文件，必须确保每次请求都获取最新版本——否则用户可能加载过期的 HTML，进而引用旧版 JS/CSS 资源，导致功能异常或白屏。你尝试通过 map 指令根据 Content-Type 动态设置 expires 值（如 text/html → epoch），看似合理，但实际在软重载（Soft Reload，如 Ctrl+R 或地址栏回车）时失效。根本原因在于：expires 依赖响应头中的 Content-Type，而 Nginx 在 try_files 回退到 /index.html 时，并不总是重新生成完整的响应头；尤其当 index.html 由 sendfile 高效传输时，Nginx 可能复用底层文件句柄，跳过 MIME 类型判定逻辑，导致 $sent_http_content_type 为空，map 匹配失败，默认走 1y 缓存。
更关键的是，Expires 头本身已属过时机制，其行为受客户端本地时间影响，且在现代浏览器中优先级低于 Cache-Control。RFC 7234 明确规定：当两者共存时，Cache-Control 的 max-age 或 no-cache/no-store 指令具有更高权威性。
✅ 正确做法：弃用 expires，改用语义清晰、兼容性更好、服务端可控的 Cache-Control：
server {
listen $PORT;
# ... 其他配置（root, gzip 等）
location / {
add_header Access-Control-Allow-Origin *;
try_files $uri /index.html;
# 关键：为 HTML 入口文件显式设置强缓存禁用策略
location = /index.html {
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
add_header Expires "0";
}
# 其他静态资源（JS/CSS/图片）可安全长期缓存
location ~ \.(js|css|json|woff2?|ttf|eot|svg|png|jpg|gif)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
}
sendfile on;
tcp_nopush on;
gzip on;
gzip_types text/html application/javascript text/css;
}
}
? 为什么这样更可靠？
- location = /index.html 是精确匹配，确保仅对根 HTML 文件生效，避免误伤其他 HTML（如错误页）；
- Cache-Control: no-cache, no-store, must-revalidate 组合指令覆盖所有主流浏览器行为：no-cache 强制校验（即使有缓存也需向服务器确认）、no-store 禁止任何存储、must-revalidate 确保过期后绝不使用陈旧副本；
- Pragma 和 Expires 作为向后兼容补充，虽非必需，但能覆盖极少数老旧客户端；
- 静态资源单独配置 immutable（需 Nginx ≥1.13.9），配合内容哈希文件名，实现真正零风险长期缓存。
⚠️ 注意事项：
- 修改后务必执行 nginx -t && nginx -s reload 验证并热重载配置；
- 浏览器开发者工具 Network 标签页中检查 /index.html 响应头，确认 Cache-Control 已生效且无其他中间件（如 CDN、反向代理）覆盖该头；
- 若使用 CDN（如 Cloudflare），需在 CDN 缓存规则中明确将 /index.html 设置为“绕过缓存”或“缓存等级：不缓存”。
总结：expires + map 方案本质是用过时机制解决现代问题，且受 Nginx 内部响应头生成时机限制，稳定性差。拥抱 Cache-Control 这一 HTTP/1.1 标准核心缓存控制机制，才能为 SPA 构建健壮、可预测、符合最佳实践的缓存策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
