Consider the query parameter when an image is cached

Hi,

just starting and moving here from cloudfront.
In cloudfront, we bypassed the cache by changing the query-parameter. that means the image is cached by the complete url.
It seems, this is different in cloudflare.
Example: I alway get the same image, with header cache-status HIT, no matter if i change the parameter ‘v’ :
curl -i https://dev-prevs.allefotografen.de/90078b3bd1759ddd09cfa6408875dfc4/sq280_108220-4YOU-Rucksack-642-114400-igrec-l.jpg?v=1588

Pagerule: CacheEverything
CachingLevel: Standard
worker:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event))
})

const BUCKET_URL = 'https://dev-de-previews-pictrs-com.s3.amazonaws.com'

async function serveAsset(event) {
  const url = new URL(event.request.url)
  response = await fetch(`${BUCKET_URL}${url.pathname}`)
  return response
}

async function handleRequest(event) {
  if (event.request.method === 'GET') {
    let response = await serveAsset(event)
    if (response.status > 399) {
      response = new Response(response.statusText, { status: response.status })
    }
    return response
  } else {
    return new Response('Method not allowed', { status: 405 })
  }
}

The worker seems to be not touched, if the image is cached.
Any Ideas how to solve this? We hoped to be able to just switch over easily from cloudfront.

Thanks and regards
Philipp

This can be solved in CloudFlare’s caching levels. The link to this is https://support.cloudflare.com/hc/en-us/articles/200168256-Understand-Cloudflare-Caching-Level

Cloudflare’s CDN caches static content according to these levels:

  • No Query String: Delivers resources from cache when there is no query string. Example URL: > example.com/pic.jpg
  • Ignore Query String: Delivers the same resource to everyone independent of the query string. > Example URL: example.com/pic.jpg?ignore=this-query-string
  • Standard (Default) : Delivers a different resource each time the query string changes. > Example URL: example.com/pic.jpg?with=query

More information can also be found here https://developers.cloudflare.com/workers/about/using-cache/

Thank you.
But that’s exactly what doesn’t seem to work in my case. I must have missed something.

I just noticed that I just appended the pathname, not the qeries.

I replaced that by

url.host = 'dev-de-previews-pictrs-com.s3.amazonaws.com'
response = await fetch(url)

Now it is working. Thanks.

1 Like

This topic was automatically closed after 31 days. New replies are no longer allowed.