wojtodzio Posts - Answer Overflow

wojtodzio

•Created by wojtodzio on 4/18/2025 in #general-help

Snippet for images optimization 404 when fetching correct URL

Hello, I'm trying to use a simple snippet to route our images through the image‑optimization service with the correct rules for each platform. This is my current snippet:

const mobileRules = "format=auto,slow-connection-quality=50,width=1024";
const webRules    = "format=auto,slow-connection-quality=65";

function isMobile(request) {
  const h = request.headers;
  const platform = h.get('platform') || "";
  if (platform === 'ios' || platform === 'android') return true;
  if (platform === 'web') return false;
  return /iPhone|iPad|iPod|Android/i.test(h.get("User-Agent") || "");
}

export default {
  async fetch(request) {
    const rules = isMobile(request) ? mobileRules : webRules;
    const url = new URL(request.url);
    const origSearch = url.search;
    url.pathname = `/cdn-cgi/image/${rules}${url.pathname}`;
    url.search = origSearch;
    // return new Response(`old: ${request.url}, new: ${url}`);
    return fetch(new Request(url.toString(), request));
  },
};

const mobileRules = "format=auto,slow-connection-quality=50,width=1024";
const webRules    = "format=auto,slow-connection-quality=65";

function isMobile(request) {
  const h = request.headers;
  const platform = h.get('platform') || "";
  if (platform === 'ios' || platform === 'android') return true;
  if (platform === 'web') return false;
  return /iPhone|iPad|iPod|Android/i.test(h.get("User-Agent") || "");
}

export default {
  async fetch(request) {
    const rules = isMobile(request) ? mobileRules : webRules;
    const url = new URL(request.url);
    const origSearch = url.search;
    url.pathname = `/cdn-cgi/image/${rules}${url.pathname}`;
    url.search = origSearch;
    // return new Response(`old: ${request.url}, new: ${url}`);
    return fetch(new Request(url.toString(), request));
  },
};

When used on the page, this snippet always returns 404. If I uncomment return new Response(old: ${request.url}, new: ${url}); I get the expected rewritten URL, and opening that URL directly loads the optimized image. When testing the snippet in DevTools, it randomly either fails with 404 or successfully fetches the image. Could you help me understand why this happens? Thanks!

1 replies

Gaming

Programming