Firstly….

Hello! I am really new to StackOverflow and English isn’t my primary language.
If my question is bad (like lack of information or too long etc) I am sorry.

What I am doing

I have created a Cloudflare Worker Application to proxy images and I have assigned Custom Domain proxy.example.tld to it.

My DNS Setting

The proxy.example.tld is proxied via Cloudflare, while other records like example.tld or *.example.tld are DNS-only.
my dns setting(image)*

What happened?

The problem is, When fetching images from https://www.example.tld/logo.png, my Cloudflare Worker shows a ‘Too Many Redirects’ error if accessed through proxy.example.tld, but works fine with the Worker’s default domain.

….also www.example.tld is hosted on Cloud Compute and It’s configured to port forwarding to my Local Backend Server via VPN tunnel.
I use Nginx as PortForwarder and ZerotierVPN for tunnel.
My Nginx is configured to do https redirect and root domain to www subdomain redirect.

Shortly

My worker is configured to fetch to https://www.example.tld/logo.png, If I access to My worker via custom domain proxy.exampel.tld 1101 error happen (too many redirect),
However if access via exampleworker.johndoe.workers.dev It will fetch without error and show logo.png which is what I intent.

I tried changing Cors-Origin e.g. however it is not fix that issues.

This is my worker application code.

// workers.js I have only that! =)

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

function urlGen(text) {
  // this is generate error image, I do this because Cloudflare Worker did not support  Image Related API(s)...
  return "https://www.example.tld/WriteTextOnImage.php?text=" + btoa(text); // this php works fine!
}

// the reason I using base64 for URL is if URL have parameter or something special, It will be not work. so I encoded in Base64 for prevent from that.

async function handleRequest(request) {
  try {
    const url = new URL(request.url)
    const base64url = url.searchParams.get('img')
    if (!base64url) {
      return await fetchImage(urlGen("URL decoding Error,nURL is not encoded in base64 or have another issues."), 500)
    }

    const decodedUrl = decodeURIComponent(atob(base64url));
    const resp = await fetchImage(decodedUrl, 200);

    if ( resp == null ) {
      return await fetchImage(urlGen("Fetching image error,nImage not exist or origin is down, or blocked by security."), 500);
    }

    return resp;

  } catch (err) {
    return await fetchImage(urlGen("During handling request,nSome error happened."),500);
  }
}

async function fetchImage(decodedUrl, statusCode=200) {
  const imageResponse = await fetch(new Request(decodedUrl, {
    method: 'GET',
    headers: {
      'Referer': decodedUrl,
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 (compatible; ImgProxy/1.0; +http://example.tld/imgbot.html)'
    }
  }))

  if ( !imageResponse.ok ) {
    return null;
  }

  return new Response(await imageResponse.blob(), {
    status: statusCode,
    headers: { 'Content-Type': imageResponse.headers.get('Content-Type') }
  });;
}

What’s my goal

I’d like to make my worker application fetch the URL that using domain www.example.tld, even if worker accessed via domain proxy.example.tld.

”Too Many Redirects Error“ on my Cloudflare Worker Application and I can’t figure out why