Image Resize on Worker return 502

Developers Workers
1

Hi, :grinning:
I am on business plan. and my Cloudflare domain is istaging.com . I am trying to run image resize on my worker, which custom domain is demo-2.istaging.com . The storage-dev.istaging.com is an A record point to google cloud load balancer ip, which routes the traffic to google cloud stroage.
I met 502 response if I add query in the url.
And I found out that when the 502 error only occurs when I turn on the proxy on demo-2.istaging.com

  • 200 https://demo.istaging.com/istaging.png
  • 404 https://demo.istaging.com/istaging.png?w=200

The reason I enable proxy is that I have tried using Cache API in the worker to cache the image resized result of url using google storage( https://storage.googleapis.com/bucketname/...) . But the cache hit ratio only reached about 50%, causing a lot of request run image resize service. So I am replacing the google storage url with proxied storage-dev.istaging.com, hoping to cache the result. Also, I’ve tried using the https://<ZONE>/cdn-cgi/image format in the worker but not worked, See here.

Here is my code.

addEventListener("fetch", (event) => {
  try {
    return event.respondWith(handleRequest(event));
  } catch (err) {
    return new Response(err.stack, { status: 500 });
  }
});

async function handleRequest(event) {
  let url = new URL(event.request.url);

  let options = { cf: { image: {} } };

  if (url.searchParams.has("fit"))
    options.cf.image.fit = url.searchParams.get("fit");
  if (url.searchParams.has("w"))
    options.cf.image.width = url.searchParams.get("w");
  if (url.searchParams.has("h"))
    options.cf.image.height = url.searchParams.get("h");
  if (url.searchParams.has("q"))
    options.cf.image.quality = url.searchParams.get("q");

  // Returns 502
  const imageURL = "https://storage-dev.istaging.com" + url.pathname;
  // It works fine when using gcs url
  // const imageURL = "https://storage.googleapis.com/bucketname" + url.pathname;

  const imageRequest = new Request(imageURL, {
    headers: event.request.headers,
  });

  return fetch(imageRequest, options);
}

Thanks for any help!

4

My guess would be that 502 error is coming from your origin (Cloudflare very rarely produces that status code itself). Could you please check the logs of your load balancer?

1 Like
5

Thank you, @albert ,
Yes, I’ve check the logs of my load balancer.

If I specify query with demo-2.istaging.com. There’s no logs and returns 502.
if I don’t specify query, there’s logs and return 200.