How can I correctly handle relative redirects in my Cloudflare Workers HTTP proxy?

Below is one approach to this problem. By default the fetch API follows redirects automatically. If you want to intercept and rework the redirect URL, you can disable automatic redirect handling (using redirect: "manual"), inspect the Location header returned by the target server, and then adjust it. If the Location header is relative you can convert it to an absolute URL using the original target URL as base. Finally, you’ll need to rewrite the Location header so that it routes through your proxy (i.e. prepend your proxy’s domain).

Below is an updated version of your worker code that implements this strategy:

JAVASCRIPTCopied
export default {
  async fetch(request, env, ctx): Promise<Response> {
    const { pathname } = new URL(request.url);
    const url = pathname.slice(1);
    if (!url) {
      return new Response("Please specify a target URL.", { status: 400 });
    }

    let targetURL;
    try {
      targetURL = new URL(url);
    } catch {
      return new Response("Invalid URL.", { status: 400 });
    }

    // Create a new Request that will be sent to the target server.
    // Set redirect to "manual" so that we can intercept any redirect responses.
    const forwardedRequest = new Request(targetURL, request);
    const res = await fetch(forwardedRequest, { redirect: "manual" });

    // If the response is a redirect, adjust the Location header
    if (res.status >= 300 && res.status < 400) {
      const location = res.headers.get("location");
      if (location) {
        // Build an absolute URL from the redirect location.
        // This handles both absolute and relative redirects.
        let absoluteRedirectURL;
        try {
          absoluteRedirectURL = new URL(location, targetURL);
        } catch (e) {
          // If we cannot construct, leave the location as is
          absoluteRedirectURL = null;
        }

        if (absoluteRedirectURL) {
          // Rewrite the Location header to point back to the proxy.
          // That is, the client will be redirected to: 
          // https://<your-proxy-domain>/<absoluteRedirectURL.href>
          const proxyHost = request.headers.get("host");
          const newLocation = `https://${proxyHost}/${absoluteRedirectURL.href}`;
          
          // Create a new Headers instance based on the original headers.
          const newHeaders = new Headers(res.headers);
          newHeaders.set("location", newLocation);
          
          // Return a new response with the rewritten Location header.
          return new Response(res.body, {
            status: res.status,
            statusText: res.statusText,
            headers: newHeaders,
          });
        }
      }
    }

    // If not a redirect response, simply pass it on.
    return new Response(res.body, res);
  },
} satisfies ExportedHandler<Env>;

Explanation

1. Disabling Automatic Redirects:
   By specifying { redirect: "manual" } on the fetch call, the response returned will be the redirect response from the target server, including the Location header.

2. Handling Relative URLs:
   When a relative redirect is encountered, constructing a new URL using new URL(location, targetURL) converts it to an absolute URL based on the target server's URL as the base.

3. Rewriting the Redirect URL:
   The Location header is rewritten so that the redirect goes through your proxy. The rewritten URL prepends your proxy domain and then uses the absolute URL of the target. This ensures that when the client receives the redirect, it goes back to your proxy which can then forward the request appropriately.

This solution should help you handle relative redirects properly in your Cloudflare Workers HTTP proxy.