html应禁用强缓存并启用协商缓存:设cache-control为no-cache,开启etag和if_modified_since exact,避免expires冲突;敏感页可用no-store彻底禁用缓存;需确保spa的try_files fallback路径也应用相同策略。

直接禁用 HTML 动态页面的客户端缓存,核心是让浏览器每次请求都向服务器确认是否更新,而不是复用本地副本。Nginx 不需要改后端逻辑,只需在响应头中正确声明缓存策略,并启用协商机制。
对 HTML 文件单独设置无强缓存 + 协商缓存
这是最推荐的做法:既避免用户卡在旧版本,又节省带宽(未修改时返回 304)。
- 在 server 或 location / 块中,匹配 .html/.htm 请求,禁用强缓存:
add_header Cache-Control "no-cache";
- 开启 ETag 和精确的 Last-Modified 校验:
etag on;
if_modified_since exact;
Linux系统管理专家,覆盖12大模块:用户权限、SSH、存储、网络、systemd、防火墙、日志监控、备份恢复、TLS证书、Ansible、容器、IaC。提供配置、验证、加固、监控、备份、自动化、故障排查、回滚闭环。关键词:useradd、sudo、sshd_config、chmod、SEL...
- 确保不设置
expires或Cache-Control: max-age,否则会覆盖no-cache效果。
若需彻底禁止任何缓存(含代理和中间设备)
适用于登录页、订单页等敏感或强实时场景,强制每次走完整响应流程。
- 对 HTML 路径添加更严格的响应头:
add_header Cache-Control "no-store, must-revalidate, proxy-revalidate";
add_header Pragma "no-cache";
add_header Expires "0";
- 注意:
no-store会阻止浏览器和所有中间缓存保存副本,比no-cache更激进。 - 建议只用于特定路径,例如:
location ~ \.(html|htm)$ { ... }。
避免常见配置陷阱
很多缓存问题其实源于配置冲突或覆盖,需特别注意:
- 不要在同一个 location 中同时写
expires 1h和add_header Cache-Control no-cache——expires会生成max-age,优先级高,实际仍会缓存。 - 如果用了
try_files $uri $uri/ /index.html(如 Vue/React SPA),确保该 location 块也应用了上述 HTML 缓存控制,否则 fallback 的/index.html可能被意外缓存。 - Nginx 默认不继承父块的
add_header,子 location 需显式重写或使用always参数(Nginx 1.7.5+)来确保响应头一定发出。
验证是否生效
部署后,用浏览器开发者工具检查 Network → Headers → Response Headers:
- 看到
Cache-Control: no-cache或no-store; - 有
ETag和Last-Modified字段; - 刷新页面时,HTML 请求状态码为
304(未修改)或200(新内容),而非200 from disk cache。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










