When examining the response headers for lifeinuk.js
, we notice several important caching headers are properly set:
Cache-Control: public, max-age=1382400
Last-Modified: Fri, 09 Jan 2015 10:06:21 GMT
ETag: W/"507660-1420797981000"
These headers suggest the file should be cacheable, yet Cloudflare continues to report CF-Cache-Status: MISS
on subsequent requests.
Here are the most common reasons for Cloudflare not caching static files:
1. Query Strings in URLs
Cloudflare treats URLs with query strings as unique resources. Check if your requests include any parameters:
http://www.testlifeinuk.com/dist/lifeinuk.js?version=1.0
Solution: Either remove query strings or enable "Ignore Query String" in Cloudflare's Cache Settings.
2. Missing or Invalid Cache-Control Headers
While your headers appear correct, verify they're being set properly by your origin server. Here's how to properly set them in Express:
app.use('/dist', express.static('public/dist', {
maxAge: '16d',
etag: true,
lastModified: true
}));
3. Browser Cache Interference
Test with curl using -H "Cache-Control: no-cache"
to bypass local caching:
curl -I -H "Cache-Control: no-cache" http://www.testlifeinuk.com/dist/lifeinuk.js
For deeper investigation, try these approaches:
Using Cloudflare's Cache API
Purge and check cache status programmatically:
# Purge cache
curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
-H "X-Auth-Email: user@example.com" \
-H "X-Auth-Key: {global_api_key}" \
-H "Content-Type: application/json" \
--data '{"files":["http://www.testlifeinuk.com/dist/lifeinuk.js"]}'
# Check cache status
curl -X GET "https://api.cloudflare.com/client/v4/zones/{zone_id}/cache/variants" \
-H "X-Auth-Email: user@example.com" \
-H "X-Auth-Key: {global_api_key}"
Edge Side Includes (ESI) Considerations
If using ESI, ensure proper configuration:
# In your Cloudflare Worker
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
let response = await fetch(request)
response = new Response(response.body, response)
response.headers.set('Cache-Control', 'public, max-age=86400')
return response
}
After implementing changes, verify with:
curl -I http://www.testlifeinuk.com/dist/lifeinuk.js | grep -i "CF-Cache-Status"
You should see CF-Cache-Status: HIT
for subsequent requests if caching is working properly.
When testing caching behavior for static JavaScript files through Cloudflare, I noticed persistent CF-Cache-Status: MISS
headers even after multiple identical requests. Here's the full header analysis from my test case:
HTTP/1.1 200 OK
Date: Mon, 12 Jan 2015 10:59:21 GMT
Content-Type: application/javascript
Cache-Control: public, max-age=1382400
Last-Modified: Fri, 09 Jan 2015 10:06:21 GMT
CF-Cache-Status: MISS
Several factors could prevent Cloudflare from caching static content:
- Query strings in URLs: Cloudflare treats
file.js?param=1
as different fromfile.js
- Cookie presence: Requests with cookies often bypass cache
- Dynamic headers: Vary headers that are too broad
Despite having proper caching headers:
Cache-Control: public, max-age=1382400
Last-Modified: Fri, 09 Jan 2015 10:06:21 GMT
Expires: Wed, 28 Jan 2015 10:59:21 GMT
Cloudflare still wasn't caching the file. The smoking gun appeared in the response headers:
Set-Cookie: __cfduid=d11a9f01292153436a211a9d807a3399b1421060361
Vary: Accept-Encoding
Here's how to verify caching behavior using curl:
# First request (should be MISS)
curl -I http://example.com/file.js
# Subsequent requests (should be HIT if caching works)
curl -I http://example.com/file.js
# Test without cookies
curl -I --cookie "" http://example.com/file.js
After testing these solutions, the caching started working:
- Page Rule: Created a rule to "Cache Everything" for
*.js
paths - Cookie Handling: Modified application to not set cookies for static assets
- Cache Level: Set to "Aggressive" in Cloudflare's Caching configuration
After implementing these changes, subsequent requests showed:
CF-Cache-Status: HIT
Age: 120