Caching rules for worker returning images

Developers Workers
1

Hi,

I created a worker which is returning images. The problem is that response is always returned from the Cloudflare cache despite having different query params. For example

https://ts-imgproc.orbitvu.workers.dev/share/6nMh4BixKhWDDU2m5tDnT/3353292/tile/104/4360/3565/images/a_0_63_1000_1_3.webp (first request == cache miss, second request == cache hit)

https://ts-imgproc.orbitvu.workers.dev/share/6nMh4BixKhWDDU2m5tDnT/3353292/tile/104/4360/3565/images/a_0_63_1000_1_3.webp?my_query_string=test (first request == cache hit)

No matter how I change query params, I always get data returned from cache. Is it possible to change it?

2

Can you post your code? Workers run in front of the cache, so a change in your code might fix your issue.

3

This is my index.ts file. I simply use the fetch function. I tried to add some params to the fetch, but no luck.

import Router, { error400 } from "./utils/router";
import ImageParser from "./utils/imageParser";
import ImgixClient from "imgix-core-js";

addEventListener("fetch", (event: FetchEvent) => {
  event.respondWith(handleRequest(event.request));
});


async function handleRequest(request: Request) {
  const r = new Router();

  // Replace with the approriate paths and handlers
  r.get("/share/.*", (req: Request) => {
    const imgParser = new ImageParser();
    const parsedData = imgParser.parseUrl(req.url);
    if (parsedData) {
      let sourceImgUrl = imgParser.buildOriginalUrl(parsedData);
      if (sourceImgUrl) {
        const edits = imgParser.prepareEdits4Tile(parsedData);
        const client = new ImgixClient({
          domain: "my_domain",
          secureURLToken: "MY_TOKEN"
        });
        let outputImageUrl;
        if (edits.length > 0) {
          if (
            (typeof edits[0].w !== "undefined" &&
              edits[0].w !== parsedData.width) ||
            (typeof edits[0].h !== "undefined" &&
              edits[0].h !== parsedData.height)
          ) {
            sourceImgUrl = client.buildURL(sourceImgUrl, edits[0]);
          }

          if (edits.length > 1) {
            outputImageUrl = client.buildURL(sourceImgUrl, edits[1]);
          } else {
            outputImageUrl = sourceImgUrl;
          }
          **return fetch(outputImageUrl);**
        }
      }
    }
    return error400();
  });

  const resp = await r.route(request);
  return resp;
6

This is my index.ts file. I simply use the fetch function. I tried to add some params to the fetch, but no luck.

import Router, { error400 } from “./utils/router”;
import ImageParser from “./utils/imageParser”;
import ImgixClient from “imgix-core-js”;

addEventListener(“fetch”, (event: FetchEvent) => {
event.respondWith(handleRequest(event.request));
});

async function handleRequest(request: Request) {
const r = new Router();

// Replace with the approriate paths and handlers
r.get("/share/.*", (req: Request) => {
const imgParser = new ImageParser();
const parsedData = imgParser.parseUrl(req.url);
if (parsedData) {
let sourceImgUrl = imgParser.buildOriginalUrl(parsedData);
if (sourceImgUrl) {
const edits = imgParser.prepareEdits4Tile(parsedData);
const client = new ImgixClient({
domain: “MY_DOMAIN”,
secureURLToken: “MY_TOKEN”
});
let outputImageUrl;
if (edits.length > 0) {
if (
(typeof edits[0].w !== “undefined” &&
edits[0].w !== parsedData.width) ||
(typeof edits[0].h !== “undefined” &&
edits[0].h !== parsedData.height)
) {
sourceImgUrl = client.buildURL(sourceImgUrl, edits[0]);
}

      if (edits.length > 1) {
        outputImageUrl = client.buildURL(sourceImgUrl, edits[1]);
      } else {
        outputImageUrl = sourceImgUrl;
      }
      return fetch(outputImageUrl);
    }
  }
}
return error400();

});

const resp = await r.route(request);
return resp;

7

I don’t see any interaction with the cache API here, are you testing and seeing the “Cf-cache-status” header? (Maybe Enterprise plan accounts can use workers behind cache).

8

Yes, I see in the response headers:

cf-cache-status: HIT