核心是通过nginx配置与资源发布机制协同解决缓存问题：确保mime类型正确（如text/css）、合理设置cache-control与expires头、采用哈希文件名实现url级缓存失效，并排查反向代理层隐性缓存。
核心是让浏览器不复用旧缓存，同时确保资源变更能被准确识别。不能只靠清浏览器缓存这种临时手段，得从 Nginx 配置和资源发布机制两头入手。
确保 CSS/JS 被正确识别为对应 MIME 类型
样式错乱但控制台无报错，常见原因是 Nginx 返回了 text/plain 而非 text/css，导致浏览器不解析 CSS 规则。
- 检查 nginx.conf 是否已包含
include mime.types;（通常在 http 块顶层） - 若使用 OpenResty 或精简版 Nginx，需手动指定路径，例如：
include /usr/local/openresty/nginx/conf/mime.types; - 补充兜底配置：
default_type text/html;或default_type application/octet-stream;（避免 fallback 到 plain）
强制浏览器重新验证或跳过强缓存
当静态资源文件名未变（如 /static/app.js），仅靠修改文件内容无法触发更新，必须干预缓存策略。
- 在静态资源 location 块中添加响应头：
add_header Cache-Control "no-cache, must-revalidate"; - 或更明确地禁用强缓存、启用协商缓存：
add_header Cache-Control "max-age=0, must-revalidate";
配合expires epoch;可确保每次请求都带 If-Modified-Since 或 If-None-Match - 注意：不要全局加
no-store，会牺牲性能；no-cache是平衡点
从根本上切断旧缓存复用路径（推荐长期方案）
让每次资源内容变化都对应一个新 URL，浏览器天然视为新资源，彻底绕过缓存比对逻辑。
- 构建时生成带哈希的文件名，例如：
app.a1b2c3.js、style.d4e5f6.css - ThinkPHP 模板中通过助手函数动态引入：
<link rel="stylesheet" href="/static/css/style_%7B%24css_hash%7D.css"> - Nginx 不需要额外配置缓存头，可安全设置长缓存：
location ~* \.(js|css|png|jpg|gif)$ { expires 1y; add_header Cache-Control "public, immutable"; } - CDN 和中间代理也认新 URL，不会忽略版本参数
排查反向代理层的隐性缓存
如果前端请求经过多层 Nginx（比如域名 A → Nginx1 反代 → Nginx2 静态服务），第一层可能启用了 proxy_cache，导致返回的是旧响应副本。
- 检查是否有
proxy_cache、proxy_cache_path等指令存在 - 临时绕过缓存验证：在 upstream 请求头中加
proxy_cache_bypass $http_upgrade;或直接注释掉 cache 相关配置 - 确认后端真实响应头是否含
X-Cache: HIT，若有说明命中了代理缓存
