Cloudflare Developers•3mo ago

ERROR 9519: Could not fetch the image — the server returned HTTP error 522 <unknown status code>

I'm trying to resize an image with cloudflare workers. Works fine on production, but gives an undocumented error when the images is on *.pages.dev domain.

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

const response = await fetch(imageRequest, {
  cf: {
    image: {
      width: 1000,
      height: 1000,
      metadata: "none",
    }
  },
});

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

const response = await fetch(imageRequest, {
  cf: {
    image: {
      width: 1000,
      height: 1000,
      metadata: "none",
    }
  },
});

Would love to have a parity between deployment previews and production deployments.

2 Replies

Chaika•3mo ago

. Works fine on production, but gives an undocumented error when the images is on *.pages.dev domain.

Is your fetch logic inside of a Pages Function? You're saying it works when fetching a custom domain but not anything on the pages.dev like a deployment preview?

lauriOP•3mo ago

It's in a separate worker. From what I understand I can't use pages function for image transformations as it runs in a different zone regardless of the custom domain. My setup is: 1. Nextjs app on domain.com 2. Images worker on a custom domain in the same zone with image transformations turned on images.domain.com 3. Resizes: images.domain.com/resize/http://domain.com/image.png (works perfectly fine) 4. But in preview deployments when I do: images.domain.com/resize/http://preview.pages.dev/image.png, I get the above error. It should work fine also for the pages.dev preview URL, since the worker runs in my zone where image transformation is enabled, but it fails to fetch the image with cf: { image: { width: 200 } } options. If I remove the image transformation options, it returns the image fine for pages.dev. I have found a workaround, which is to reverse proxy images from pages.dev first and then transform them in a separate fetch. Which leads me to believe that this is a bug within Cloudflare infra somewhere, or at the very least it's an error that is not named correctly From within a worker: (note that domain.com is custom domain to preview.pages.dev) Works:

fetch(new Request("https://domain.com/image/test.png", { headers }), {
  cf: { image: { width: 200 } },
});

fetch(new Request("https://domain.com/image/test.png", { headers }), {
  cf: { image: { width: 200 } },
});

Doesn't work (ERROR 9519):

fetch(new Request("https://preview.pages.dev/image/test.png", { headers }), {
  cf: { image: { width: 200 } },
});

fetch(new Request("https://preview.pages.dev/image/test.png", { headers }), {
  cf: { image: { width: 200 } },
});

Works:

fetch(
  new Request("https://images.domain.com/proxy/https://preview.pages.dev/image/test.png",
    { headers }
  ),
  { cf: { image: { width: 200 } } }
);

fetch(
  new Request("https://images.domain.com/proxy/https://preview.pages.dev/image/test.png",
    { headers }
  ),
  { cf: { image: { width: 200 } } }
);

(I wrote the examples just quickly here, so any typos in code are not relevant to the behaviour, but just my inability to write code within Discord textarea) I'd be fine even if it just falled back to not transforming the image for whatever reason, but the error wasted me so much time

Gaming

Programming

ERROR 9519: Could not fetch the image — the server returned HTTP error 522 <unknown status code>