如何配置Cloudflare缓存SPA文件，同时保留浏览器缓存规则？

核心思路 #

Cloudflare和浏览器的缓存规则是独立的，需分别配置：

• Cloudflare层：缓存所有文件（包括index.html），直到部署时主动清理
• 浏览器层：带哈希的静态资源（JS/CSS/图片等）长缓存，index.html强制验证缓存有效性

具体配置步骤 #

1. 服务器端Cache-Control设置（保持现有逻辑） #

服务器返回的响应头需严格区分两类资源：

• 带哈希的静态资源（如app.abc123.js、style.def456.css）：

  Cache-Control: public, max-age=31536000, immutable
  

  （immutable用于告诉浏览器在max-age有效期内无需发起缓存验证请求，进一步优化性能）
• index.html：

  Cache-Control: no-cache
  

  （强制浏览器每次请求都先验证缓存，确保拿到最新的入口文件）

2. Cloudflare页面规则配置 #

创建两条页面规则（注意精确匹配的规则优先级更高，需放在前面）：

规则1：针对index.html的缓存规则

• 匹配URL：yourdomain.com/index.html（替换为你的实际域名）
• 设置项：
  • 开启「Cache Level」→「Cache Everything」
  • 开启「Edge Cache TTL」→「自定义」，设置为86400秒（1天，可根据需求调整为更长，比如30天，因为部署时会主动清理缓存）
  • （可选）开启「Cache Key」→「忽略查询字符串」（若index.html无查询参数）

规则2：针对哈希静态资源的强化缓存规则（可选）

• 匹配URL：yourdomain.com/*.[js|css|png|jpg|svg]（根据你的资源后缀调整）
• 设置项：
  • 开启「Cache Level」→「Cache Everything」
  • 开启「Edge Cache TTL」→「自定义」，设置为31536000秒（1年）
  • 开启「Cache Key」→「包含查询字符串」（若哈希在URL参数中；若哈希在文件名中，如app.abc123.js，则选择「忽略查询字符串」）

3. 部署时的缓存清理 #

每次发布新版本时，调用Cloudflare的Purge All Files API（或在Cloudflare控制台手动点击「清除所有缓存」），强制Cloudflare丢弃旧缓存并拉取最新文件。

常见问题排查 #

• 为什么之前设置Cloudflare-CDN-Cache-Control无效？
  页面规则的优先级高于响应头中的Cloudflare-CDN-Cache-Control，若页面规则未正确配置或未启用，响应头设置会被忽略。需确保规则的匹配URL准确且处于启用状态。
• 为什么cf-cache-status仍显示EXPIRED？
  检查Edge Cache TTL设置是否正确，若TTL过短（如0秒）会导致缓存立即过期；同时确认服务器未返回Pragma: no-cache这类会覆盖缓存规则的响应头。
• 浏览器会不会缓存旧的index.html？
  不会，服务器返回的Cache-Control: no-cache会强制浏览器每次请求都向Cloudflare验证缓存，而部署清理后Cloudflare会返回最新的index.html。

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