缓存头实验

CF Pages 的 _headers 文件怎么控制缓存

用 curl 直接看头

这个页面的 HTML 本身没设特殊头，但 CF 默认会加。下面每个探针路径配了不同的 _headers 规则：

# _headers 内容
/assets/*
  Cache-Control: public, max-age=31536000, immutable
/static-1h
  Cache-Control: public, max-age=3600
/no-cache
  Cache-Control: no-cache
/* 
  X-Frame-Options: SAMEORIGIN
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin

探针路径

路径	规则	预期
`/lab/probe-immutable`	长缓存 1 年	immutable
`/lab/probe-1h`	缓存 1 小时	max-age=3600
`/lab/probe-nocache`	不缓存	no-cache

CF 自己的头

不管 _headers 怎么写，CF 总会加这些：

头	作用
`cf-cache-status`	HIT 命中边缘缓存 / MISS 回源 / DYNAMIC 不缓存
`cf-ray`	本次请求经过的边缘节点 ID，排查时有用
`age`	这个响应在边缘缓存里躺了多久（秒）
`etag`	内容指纹，配合 If-None-Match 做 304

实操建议

带 hash 的文件名（app.4f3a2b.js）→ 缓存 1 年 + immutable。
HTML 入口 → no-cache，保证发版后用户能立刻拿到新版。
调试时加 ?t=随机数 绕过缓存。

⚠️ 已知坑

CF Pages 对 .html 会 308 跳到无扩展名路径（pretty URL）。所以 _headers 的路径规则要按重定向后的路径写，否则不生效。