Add redirect support to fetch-proxy

Fixes #38
Closes #69

Author: mjackson

packages/fetch-proxy/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 This is the changelog for [`fetch-proxy`](https://github.com/mjackson/remix-the-web/tree/main/packages/fetch-proxy). It follows [semantic versioning](https://semver.org/).
 
+## HEAD
+
+- Forward all additional options to the proxied request object
+
 ## v0.3.0 (2025-06-10)
 
 - Add `/src` to npm package, so "go to definition" goes to the actual source

packages/fetch-proxy/src/lib/fetch-proxy.test.ts

@@ -3,70 +3,73 @@ import { describe, it } from 'node:test';
 
 import { type FetchProxyOptions, createFetchProxy } from './fetch-proxy.ts';
 
-async function runProxy(
-  request: Request,
+async function testProxy(
+  input: URL | RequestInfo,
+  init: RequestInit | undefined,
   target: string | URL,
   options?: FetchProxyOptions,
 ): Promise<{ request: Request; response: Response }> {
-  let outgoingRequest: Request;
+  let request: Request;
   let proxy = createFetchProxy(target, {
     ...options,
-    async fetch(input, init) {
-      outgoingRequest = new Request(input, init);
-      return options?.fetch?.(input, init) ?? new Response();
+    fetch(input, init) {
+      request = new Request(input, init);
+      return options?.fetch?.(input, init) ?? Promise.resolve(new Response());
     },
   });
 
-  let proxyResponse = await proxy(request);
+  let response = await proxy(input, init);
 
-  assert.ok(outgoingRequest!);
+  assert.ok(request!);
 
-  return {
-    request: outgoingRequest,
-    response: proxyResponse,
-  };
+  return { request, response };
 }
 
 describe('fetch proxy', () => {
   it('appends the request URL pathname + search to the target URL', async () => {
-    let { request: request1 } = await runProxy(
-      new Request('http://shopify.com'),
+    let { request: request1 } = await testProxy(
+      'http://shopify.com',
+      undefined,
       'https://remix.run:3000/rsc',
     );
 
     assert.equal(request1.url, 'https://remix.run:3000/rsc');
 
-    let { request: request2 } = await runProxy(
-      new Request('http://shopify.com/?q=remix'),
+    let { request: request2 } = await testProxy(
+      'http://shopify.com/?q=remix',
+      undefined,
       'https://remix.run:3000/rsc',
     );
 
     assert.equal(request2.url, 'https://remix.run:3000/rsc?q=remix');
 
-    let { request: request3 } = await runProxy(
-      new Request('http://shopify.com/search?q=remix'),
+    let { request: request3 } = await testProxy(
+      'http://shopify.com/search?q=remix',
+      undefined,
       'https://remix.run:3000/',
     );
 
     assert.equal(request3.url, 'https://remix.run:3000/search?q=remix');
 
-    let { request: request4 } = await runProxy(
-      new Request('http://shopify.com/search?q=remix'),
+    let { request: request4 } = await testProxy(
+      'http://shopify.com/search?q=remix',
+      undefined,
       'https://remix.run:3000/rsc',
     );
 
     assert.equal(request4.url, 'https://remix.run:3000/rsc/search?q=remix');
   });
 
   it('forwards request method, headers, and body', async () => {
-    let { request } = await runProxy(
-      new Request('http://shopify.com/search?q=remix', {
+    let { request } = await testProxy(
+      'http://shopify.com/search?q=remix',
+      {
         method: 'POST',
         headers: {
           'Content-Type': 'text/plain',
         },
         body: 'hello',
-      }),
+      },
       'https://remix.run:3000/rsc',
     );
 
@@ -75,9 +78,24 @@ describe('fetch proxy', () => {
     assert.equal(await request.text(), 'hello');
   });
 
+  it('forwards an empty request body', async () => {
+    let { request } = await testProxy(
+      'http://shopify.com/search?q=remix',
+      {
+        method: 'POST',
+      },
+      'https://remix.run:3000/rsc',
+    );
+
+    assert.equal(request.method, 'POST');
+    assert.equal(request.headers.get('Content-Type'), null);
+    assert.equal(await request.text(), '');
+  });
+
   it('does not append X-Forwarded-Proto and X-Forwarded-Host headers by default', async () => {
-    let { request } = await runProxy(
-      new Request('http://shopify.com:8080/search?q=remix'),
+    let { request } = await testProxy(
+      'http://shopify.com:8080/search?q=remix',
+      undefined,
       'https://remix.run:3000/rsc',
     );
 
@@ -86,8 +104,9 @@ describe('fetch proxy', () => {
   });
 
   it('appends X-Forwarded-Proto and X-Forwarded-Host headers when desired', async () => {
-    let { request } = await runProxy(
-      new Request('http://shopify.com:8080/search?q=remix'),
+    let { request } = await testProxy(
+      'http://shopify.com:8080/search?q=remix',
+      undefined,
       'https://remix.run:3000/rsc',
       {
         xForwardedHeaders: true,
@@ -98,9 +117,26 @@ describe('fetch proxy', () => {
     assert.equal(request.headers.get('X-Forwarded-Host'), 'shopify.com:8080');
   });
 
+  it('forwards additional request init options', async () => {
+    let { request } = await testProxy(
+      'http://shopify.com/search?q=remix',
+      {
+        cache: 'no-cache',
+        credentials: 'include',
+        redirect: 'manual',
+      },
+      'https://remix.run:3000/rsc',
+    );
+
+    assert.equal(request.cache, 'no-cache');
+    assert.equal(request.credentials, 'include');
+    assert.equal(request.redirect, 'manual');
+  });
+
   it('rewrites cookie domain and path', async () => {
-    let { response } = await runProxy(
-      new Request('http://shopify.com/search?q=remix'),
+    let { response } = await testProxy(
+      'http://shopify.com/search?q=remix',
+      undefined,
       'https://remix.run:3000/rsc',
       {
         async fetch() {
@@ -122,8 +158,9 @@ describe('fetch proxy', () => {
   });
 
   it('does not rewrite cookie domain and path when opting-out', async () => {
-    let { response } = await runProxy(
-      new Request('http://shopify.com/?q=remix'),
+    let { response } = await testProxy(
+      'http://shopify.com/?q=remix',
+      undefined,
       'https://remix.run:3000/rsc',
       {
         rewriteCookieDomain: false,

packages/fetch-proxy/src/lib/fetch-proxy.ts

@@ -48,27 +48,27 @@ export function createFetchProxy(target: string | URL, options?: FetchProxyOptio
   }
 
   return async (input: URL | RequestInfo, init?: RequestInit) => {
-    let incomingRequest = new Request(input, init);
-    let incomingUrl = new URL(incomingRequest.url);
+    let request = new Request(input, init);
+    let url = new URL(request.url);
 
-    let proxyUrl = new URL(incomingUrl.search, targetUrl);
-    if (incomingUrl.pathname !== '/') {
+    let proxyUrl = new URL(url.search, targetUrl);
+    if (url.pathname !== '/') {
       proxyUrl.pathname =
-        proxyUrl.pathname === '/' ? incomingUrl.pathname : proxyUrl.pathname + incomingUrl.pathname;
+        proxyUrl.pathname === '/' ? url.pathname : proxyUrl.pathname + url.pathname;
     }
 
-    let proxyHeaders = new Headers(incomingRequest.headers);
+    let proxyHeaders = new Headers(request.headers);
     if (xForwardedHeaders) {
-      proxyHeaders.append('X-Forwarded-Proto', incomingUrl.protocol.replace(/:$/, ''));
-      proxyHeaders.append('X-Forwarded-Host', incomingUrl.host);
+      proxyHeaders.append('X-Forwarded-Proto', url.protocol.replace(/:$/, ''));
+      proxyHeaders.append('X-Forwarded-Host', url.host);
     }
 
     let proxyInit: RequestInit = {
-      method: incomingRequest.method,
+      ...init,
       headers: proxyHeaders,
     };
-    if (incomingRequest.method !== 'GET' && incomingRequest.method !== 'HEAD') {
-      proxyInit.body = incomingRequest.body;
+    if (request.method !== 'GET' && request.method !== 'HEAD') {
+      proxyInit.body = request.body;
 
       // init.duplex = 'half' must be set when body is a ReadableStream, and Node follows the spec.
       // However, this property is not defined in the TypeScript types for RequestInit, so we have
@@ -77,8 +77,8 @@ export function createFetchProxy(target: string | URL, options?: FetchProxyOptio
       (proxyInit as { duplex: 'half' }).duplex = 'half';
     }
 
-    let targetResponse = await localFetch(proxyUrl, proxyInit);
-    let responseHeaders = new Headers(targetResponse.headers);
+    let response = await localFetch(proxyUrl, proxyInit);
+    let responseHeaders = new Headers(response.headers);
 
     if (responseHeaders.has('Set-Cookie')) {
       let setCookie = responseHeaders.getSetCookie();
@@ -89,7 +89,7 @@ export function createFetchProxy(target: string | URL, options?: FetchProxyOptio
         let header = new SetCookie(cookie);
 
         if (rewriteCookieDomain && header.domain) {
-          header.domain = incomingUrl.host;
+          header.domain = url.host;
         }
 
         if (rewriteCookiePath && header.path) {
@@ -104,9 +104,9 @@ export function createFetchProxy(target: string | URL, options?: FetchProxyOptio
       }
     }
 
-    return new Response(targetResponse.body, {
-      status: targetResponse.status,
-      statusText: targetResponse.statusText,
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
       headers: responseHeaders,
     });
   };