Cloudflare特定URL缓存清除后前端仍取缓存，直接API调用正常

背景 #

我有一个给前端提供数据的API，和前端一同部署在Cloudflare后。API响应头配置为cache-control: max-age=0, must-revalidate, public, s-maxage=604800。手动在浏览器地址栏输入API URL调用时，清除Cloudflare缓存能拿到新数据；但React前端发起相同请求时，即使刚清完缓存，还是收到旧数据。

已尝试的操作：

• 数据变更后清除Cloudflare API缓存，手动请求有效，说明清除操作本身没问题
• 前端请求设置Cache-Control: max-age=0，但响应头仍显示cf-cache-status: HIT
• 清除全部缓存时前端能拿到新数据，但清除特定URL缓存无效

1. 为何清除特定URL缓存后，手动调用有效但前端调用无效？ #

核心原因是Cloudflare的缓存键并非仅由URL决定。Cloudflare默认会将部分请求头字段（比如Accept、Origin、Accept-Encoding、Referer等）纳入缓存键的计算。

对比手动请求和前端请求的头信息：

• 手动请求的Accept是text/html,application/xhtml+xml,...，无Origin、Referer字段
• 前端请求的Accept是*/*，带有Origin、Referer、sec-fetch-mode等字段

这意味着两个请求在Cloudflare中对应完全不同的缓存条目。当你清除特定URL缓存时，只会清除与手动请求缓存键匹配的条目，前端请求对应的缓存条目并未被触及，所以前端仍会命中旧缓存。

2. 请求头或缓存行为中是否有遗漏的配置？ #

有几个关键遗漏点：

• Cloudflare缓存键规则：默认规则包含多个请求头，导致相同URL的不同请求生成不同缓存键，未针对API调整缓存键以忽略不必要的头字段
• 缓存标签（Cache Tags）：API响应未配置Cache-Tag头，无法批量清除关联的所有缓存条目
• 前端请求的缓存控制：max-age=0仅作用于浏览器缓存，无法绕过Cloudflare已存在的缓存条目（因缓存键差异，请求根本没触发重新验证）

3. 如何确保前端在清除Cloudflare缓存后能获取新鲜数据？ #

推荐以下几种方案，按优先级排序：

方案1：调整Cloudflare缓存键规则

在Cloudflare控制台为API路径（比如/api/*）自定义缓存键，忽略导致差异的请求头：

1. 进入Cloudflare控制台 → 目标域名 → 缓存 → 缓存规则
2. 创建新规则，匹配API路径
3. 在「缓存键」设置中选择「自定义缓存键」，取消勾选Accept、Origin、Referer等不必要的字段，仅保留URL和Host等必要头

这样相同URL的请求会共用同一个缓存键，清除特定URL时所有关联缓存都会被清除。

方案2：使用缓存标签批量清除

1. 在API响应头中添加Cache-Tag，比如Cache-Tag: api-filters（可给不同API设置不同标签）
2. 数据变更时，通过Cloudflare的Purge API或控制台，清除带有该标签的所有缓存条目

这种方式能精准清除所有关联缓存，不受请求头差异影响，适合多终端/多场景调用同一API的情况。

方案3：前端请求添加缓存破击参数

在前端API请求URL后添加唯一查询参数，示例：

fetch(`https://api.example.com/api/filters?t=${Date.now()}`)

但该方式会完全绕过Cloudflare缓存，失去CDN加速优势，仅适合数据频繁变更且对缓存要求低的场景。

方案4：优化API缓存策略

如果API数据变更频繁，可降低s-maxage的值，或者在数据变更时主动触发Purge操作（结合缓存标签），而非依赖手动清除单个URL。

内容的提问来源于stack exchange，提问作者Jayant Singh