Fix Cache-Control Headers on Cloudflare

Last updated: April 2026

Cloudflare caches based on origin Cache-Control headers and its own edge TTL. Configure both for predictable caching behaviour.

Cache Rules — recommended (2024+)

Dashboard → Your domain → Caching → Cache Rules → Create rule.

# Static assets — cache at edge 1 year
When: File extension matches js, css, woff2, png, jpg, webp
Then: Edge TTL = 1 year, Browser TTL = 1 year, Cache status = Cache

# API — bypass cache
When: URI path starts with /api/
Then: Cache status = Bypass

Transform Rules — modify Cache-Control header

Dashboard → Rules → Transform Rules → Modify Response Header.

# Static assets
Set Cache-Control: public, max-age=31536000, immutable

# API responses
Set Cache-Control: no-store

# HTML pages
Set Cache-Control: no-cache

Cloudflare Worker — full control

export default {
  async fetch(request, env) {
    const response = await fetch(request);
    const url = new URL(request.url);
    const headers = new Headers(response.headers);

    if (url.pathname.startsWith('/api/')) {
      headers.set('Cache-Control', 'no-store');
    } else if (/\.(js|css|woff2|png|jpg)$/.test(url.pathname)) {
      headers.set('Cache-Control', 'public, max-age=31536000, immutable');
    } else {
      headers.set('Cache-Control', 'no-cache');
    }

    return new Response(response.body, { status: response.status, headers });
  }
};

stale-while-revalidate on Cloudflare

Cache-Control: public, max-age=60, stale-while-revalidate=300

Verify cache headers

curl -sI https://yoursite.com/app.js | grep -iE "cache-control|cf-cache-status|age"