Fix native fetch immutable headers issue

.changeset/cyan-dingos-report.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/server-runtime": patch
+---
+
+Fix issue with setting additional headers on raw native fetch responses with immutable headers

packages/remix-server-runtime/__tests__/server-test.ts

@@ -612,6 +612,35 @@ describe("shared server runtime", () => {
       expect(indexLoader.mock.calls.length).toBe(1);
     });
 
+    test("data request calls loader returning raw fetch response", async () => {
+      let build = mockServerBuild({
+        root: {
+          default: {},
+        },
+        "routes/_index": {
+          parentId: "root",
+          index: true,
+          loader() {
+            return fetch(`https://remix.run/docs/en/main?_data=root`);
+          },
+        },
+      });
+      let handler = createRequestHandler(build, ServerMode.Development);
+
+      let request = new Request(`${baseUrl}/?_data=routes/_index`, {
+        method: "get",
+      });
+
+      let result = await handler(request);
+      expect(result.status).toBe(200);
+      expect(result.headers.get("X-Remix-Response")).toBe("yes");
+      expect(await result.json()).toEqual({
+        colorScheme: "system",
+        host: "remix.run",
+        isProductionHost: true,
+        noIndex: false,
+      });
+    });
     test("data request calls loader and responds with generic message and error header", async () => {
       let rootLoader = jest.fn(() => {
         throw new Error("test");

packages/remix-server-runtime/server.ts

@@ -360,12 +360,12 @@ async function handleDataRequest(
 
     // Mark all successful responses with a header so we can identify in-flight
     // network errors that are missing this header
-    response.headers.set("X-Remix-Response", "yes");
+    response = await safelySetHeader(response, "X-Remix-Response", "yes");
     return response;
   } catch (error: unknown) {
     if (isResponse(error)) {
-      error.headers.set("X-Remix-Catch", "yes");
-      return error;
+      let response = await safelySetHeader(error, "X-Remix-Catch", "yes");
+      return response;
     }
 
     if (isRouteErrorResponse(error)) {
@@ -705,8 +705,8 @@ async function handleResourceRequest(
     if (isResponse(error)) {
       // Note: Not functionally required but ensures that our response headers
       // match identically to what Remix returns
-      error.headers.set("X-Remix-Catch", "yes");
-      return error;
+      let response = await safelySetHeader(error, "X-Remix-Catch", "yes");
+      return response;
     }
 
     if (isResponseStub(error)) {
@@ -799,3 +799,48 @@ function createRemixRedirectResponse(
     headers,
   });
 }
+
+async function safelySetHeader(
+  response: Response,
+  name: string,
+  value: string
+): Promise<Response> {
+  try {
+    response.headers.set(name, value);
+  } catch (error: unknown) {
+    // Check if this was a directly-returned native `fetch` response with
+    // immutable headers preventing us from setting additional headers
+    let isImmutableHeadersError =
+      isError(error) &&
+      error.name === "TypeError" &&
+      error.message === "immutable";
+
+    // Re-throw any other type of error
+    if (!isImmutableHeadersError) {
+      throw error;
+    }
+
+    // Clone the response so we can set our headers
+    let newHeaders = new Headers();
+    for (let [key, value] of response.headers.entries()) {
+      newHeaders.append(key, value);
+    }
+    newHeaders.set(name, value);
+    return new Response(await response.blob(), {
+      status: response.status,
+      statusText: response.statusText,
+      headers: newHeaders,
+    });
+  }
+  return response;
+}
+
+function isError(e: unknown): e is Error {
+  return (
+    typeof e === "object" &&
+    e != null &&
+    "name" in e &&
+    "message" in e &&
+    "stack" in e
+  );
+}