Cloudflare未缓存带正确标头的静态资源问题咨询

我来帮你排查下这个问题——虽然Cloudflare默认会缓存JS、CSS这类静态资源，但你的style.a574b.css返回cf-cache-status: MISS，结合你给出的响应头（已经设置了cache-control: public, max-age=31536000），下面是几个常见的原因和对应的解决办法：

• 首次请求或缓存已过期
  MISS状态有时候只是因为这是该资源的首次请求，Cloudflare还没来得及将它存入缓存；或者之前的缓存条目已经过期被清理了。你可以尝试再次发起请求，看看cf-cache-status会不会变成HIT。

• 页面规则（Page Rules）覆盖了默认缓存行为
  检查你的Cloudflare控制面板里的页面规则，有没有设置类似「缓存级别：不缓存」或者自定义的缓存规则，不小心禁用了这个CSS文件的缓存。比如如果有匹配*.example.com/*.css的规则，但设置了缓存绕过，那肯定会导致MISS。

• 自定义缓存键（Cache Key）影响了缓存匹配
  如果你在Cloudflare的「缓存」->「缓存规则」里修改了缓存键的配置，比如加入了某些请求头作为缓存键的一部分，那可能导致即使资源本身没变，只要请求头不同，就会命中不同的缓存（或者没有缓存）。可以检查下这部分的设置。

• 开启了开发模式
  如果你的Cloudflare账号开启了开发模式，它会直接绕过所有缓存，每次都回源服务器请求资源，这时候cf-cache-status必然是MISS。记得关闭开发模式，正常情况下它应该处于关闭状态。

• 缓存策略还未同步到所有节点
  有时候刚修改了缓存设置或者上传了新资源，Cloudflare的全球节点需要一点时间来同步策略，尤其是跨区域的节点。可以等几分钟再测试，或者手动在Cloudflare里对该资源发起「清除缓存」操作后重新请求。

额外小建议：你可以用Cloudflare的「缓存分析」工具查看该资源的缓存详情，或者在控制面板里手动「预加载」这个资源，强制Cloudflare将它存入缓存。

内容的提问来源于stack exchange，提问作者Simon Ludwig