Cloudflare: fix image resizing (#3143)

Author: SamyPesse

packages/gitbook-v2/src/lib/images/resizer/cdn-cgi.ts

@@ -1,5 +1,6 @@
 import { GITBOOK_IMAGE_RESIZE_URL } from '@v2/lib/env';
 import type { CloudflareImageOptions } from './types';
+import { copyImageResponse } from './utils';
 
 /**
  * Resize an image by doing a request to a /cdn/cgi/ endpoint.
@@ -26,16 +27,18 @@ export async function resizeImageWithCDNCgi(
     // biome-ignore lint/suspicious/noConsole: this log is useful for debugging
     console.log(`resize image using cdn-cgi: ${resizeURL}`);
 
-    return await fetch(resizeURL, {
-        headers: {
-            // Pass the `Accept` header, as Cloudflare uses this to validate the format.
-            Accept:
-                resizeOptions.format === 'json'
-                    ? 'application/json'
-                    : `image/${resizeOptions.format || 'jpeg'}`,
-        },
-        signal,
-    });
+    return copyImageResponse(
+        await fetch(resizeURL, {
+            headers: {
+                // Pass the `Accept` header, as Cloudflare uses this to validate the format.
+                Accept:
+                    resizeOptions.format === 'json'
+                        ? 'application/json'
+                        : `image/${resizeOptions.format || 'jpeg'}`,
+            },
+            signal,
+        })
+    );
 }
 
 function stringifyOptions(options: CloudflareImageOptions): string {

packages/gitbook-v2/src/lib/images/resizer/cf-fetch.ts

@@ -1,4 +1,5 @@
 import type { CloudflareImageOptions } from './types';
+import { copyImageResponse } from './utils';
 
 /**
  * Resize an image by doing a request to the image itself using the Cloudflare fetch.
@@ -17,15 +18,17 @@ export async function resizeImageWithCFFetch(
     // biome-ignore lint/suspicious/noConsole: this log is useful for debugging
     console.log(`resize image using cf-fetch: ${input}`);
 
-    return await fetch(input, {
-        headers: {
-            // Pass the `Accept` header, as Cloudflare uses this to validate the format.
-            Accept:
-                resizeOptions.format === 'json'
-                    ? 'application/json'
-                    : `image/${resizeOptions.format || 'jpeg'}`,
-        },
-        signal,
-        cf: { image: resizeOptions },
-    });
+    return copyImageResponse(
+        await fetch(input, {
+            headers: {
+                // Pass the `Accept` header, as Cloudflare uses this to validate the format.
+                Accept:
+                    resizeOptions.format === 'json'
+                        ? 'application/json'
+                        : `image/${resizeOptions.format || 'jpeg'}`,
+            },
+            signal,
+            cf: { image: resizeOptions },
+        })
+    );
 }

packages/gitbook-v2/src/lib/images/resizer/utils.ts

@@ -0,0 +1,7 @@
+/**
+ * Copy a response to make sure it can be mutated by the rest of the middleware.
+ * To avoid errors "Can't modify immutable headers".
+ */
+export function copyImageResponse(response: Response) {
+    return new Response(response.body, response);
+}