HTTP 缓存到底怎么配才不踩坑
四个头字段先分清
Cache-Control：最重要，决定缓存多久、谁能缓存Expires：老字段，现在基本被 Cache-Control 覆盖ETag：内容指纹，用于协商缓存Last-Modified：最后修改时间，精度只到秒
强缓存 vs 协商缓存
强缓存：在有效期内，浏览器直接用本地副本，不发请求。 协商缓存：每次发请求，服务器返回 304 或 200。
Cache-Control: max-age=31536000, immutable
immutable 是给「文件名带哈希」的静态资源用的 —— 告诉浏览器这一年里连刷新都不用重新验证。
常见错误配置
错误一：HTML 也设长缓存
Cache-Control: max-age=86400 # HTML 千万别这么写
结果就是发版后用户还在看旧页面。HTML 应该是：
Cache-Control: no-cache
注意 no-cache 不是「不缓存」，是「用之前必须验证」。真要完全不缓存才用 no-store。
错误二：API 响应被 CDN 缓存
带用户信息的接口如果没设 private，可能被 CDN 缓存后返回给别的用户。
Cache-Control: private, no-store
我的默认模板
| 资源 | Cache-Control |
|---|---|
| HTML | no-cache |
| JS/CSS（带哈希） | max-age=31536000, immutable |
| 图片（不带哈希） | max-age=86400 |
| 用户相关 API | private, no-store |
小结
缓存配置的核心就一句话：能长期不变的资源才给长缓存，会变的资源交给协商缓存。想清楚这一点，大部分坑都能绕开。
