Can workers override CF Cache ignoring Vary header?

@harris seems Cloudflare cache outlined at https://support.cloudflare.com/hc/en-us/articles/115003206852-Understanding-Origin-Cache-Control does not respect the Accept: Vary header. This can be problematic for CF free plan usage where nginx origin backend is conditionally serving webP images to browsers that support it

map $http_accept $webp_extension {
    default "";
    "~*webp" ".webp";
}

  location ~* ^/wp-content/uploads/(.+/)?(.+)\.(png|jpe?g)$ {
    expires 30d;
    add_header Vary "Accept";
    add_header Cache-Control "public, no-transform";
    try_files $uri$webp_extension $uri =404;
  }

But CF cache ignores Vary header so CF cache ends up serving webP images to browsers that do not support it.

So can CF workers workaround this ? Or only upgrading to CF Pro for Polish and webP is the way ?

Perhaps something like: use a Bypass Cache page rule on the route in question, then use the Cache API to explicitly cache the different responses under different URLs.

1 Like

But the Bypass cache page rule wouldn’t exist on Cloudflare Free plans which is where the problem lies. For paid plans they’re have Polish/webP conversion so wouldn’t need a workaround.

I think for now until I find a solution, I’ll just disable nginx side webp detection if CF proxy is detected on the nginx origin site so my LEMP stack end users don’t end up with problems when they use CF free plan and have a high portion of Safari browser users where webP isn’t supported but Cloudflare cache ends up serving webP format images from cache to them still.

map $http_accept $webp_extension {
    default "";
    "~*webp" ".webp";
}

map $http_cf_connecting_ip $webp_extension {
    default "";  
}

I was able to create a “Cache Level: Bypass” page rule (I didn’t know the exact name before) on my free zone, and it worked.

2 Likes

cheers i was incorrectly thinking of cache bypass on cookie :slight_smile:

2 Likes