nginx可通过add_header x-cache-status $upstream_cache_status always;注入缓存状态头，需先启用proxy_cache或fastcgi_cache并配置cache_path；常见值包括hit、miss、expired等，仅反映nginx本层缓存。

在前端调试中，快速判断请求是否命中 CDN 或 Nginx 缓存非常关键。Nginx 本身不直接提供标准的缓存状态头，但可通过 add_header 结合内置变量（如 $upstream_cache_status）动态注入 X-Cache-Status，让前端一目了然看到缓存结果。

确认 Nginx 已启用 proxy_cache 或 fastcgi_cache

只有开启缓存模块后，$upstream_cache_status 变量才有值。常见配置示例如下：

• 定义缓存区：proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m max_size=1g inactive=60m use_temp_path=off;
• 在 server 或 location 块中启用：proxy_cache my_cache;
• 设置缓存键与过期策略，例如：proxy_cache_key "$scheme$request_method$host$request_uri"; 和 proxy_cache_valid 200 302 10m;

使用 add_header 注入 X-Cache-Status 头部

add_header 必须放在能访问到 $upstream_cache_status 的上下文中（通常是 location 块内），且注意它不会继承父块配置。推荐写法：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

• add_header X-Cache-Status $upstream_cache_status always; —— always 参数确保即使响应是 304、4xx 也输出该头
• 避免写在 if 块或不匹配的 location 中，否则变量可能为空或未定义
• 若同时用到了 fastcgi_cache（如 PHP-FPM 场景），对应变量为 $fastcgi_cache_status，需按实际缓存类型选择

前端如何查看和利用这个头部

浏览器开发者工具 Network 面板中，点击任意请求 → Headers → Response Headers，即可看到 X-Cache-Status 的值。常见取值含义：

• HIT：命中本地缓存（Nginx 或上游 CDN）
• MISS：未命中，回源拉取
• EXPIRED：缓存已过期，但仍在使用（stale），通常伴随 proxy_cache_use_stale
• BYPASS：因 proxy_cache_bypass 规则跳过缓存
• UPDATING：缓存正在更新（旧内容仍返回，后台异步刷新）

注意事项与常见问题

该头部仅反映 Nginx 本层缓存行为，不体现 CDN 或浏览器缓存状态。若需全链路追踪，建议配合其他头（如 X-Cache、X-Cache-Hits）或日志分析。另外：

• 确保 Nginx 版本 ≥ 1.7.5（$upstream_cache_status 自此版本稳定支持）
• 避免在多个 location 中重复添加同名 header，否则可能被覆盖
• 生产环境可考虑关闭该头，或通过 map + 变量控制是否输出，避免暴露服务细节

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！