Fix missing CORS header on image-cdn's actual image responses

The OPTIONS preflight handler set Access-Control-Allow-Origin, but the
real GET responses never did. small/large (served via R2Service) had
no CORS header at all, so cross-origin fetch() calls - both the PDF
live preview and, from within the PDF render Worker, any consumer
fetching these images - failed outright in every browser (confirmed
via an isolated main-thread + Worker fetch test in real Firefox and
Chromium, no test-harness CORS shim). full happened to "work" only
because Google's own response carries a permissive CORS header that
passes through unmodified - not something to depend on.

Add the header to every actual image response, and add regression
tests covering all three size tiers against a mocked upstream response
that deliberately has no CORS header of its own.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: WilfordGrimley

image-cdn/src/handler/image.ts

@@ -24,19 +24,34 @@ export const handleImageRequest = async (url: URL, request: Request, env: Env, c
 
   const imageKey = R2Service.getImageKey(imageType, imageSize, imageIdentifier);
 
-  switch (request.method) {
-    case "GET":
-      switch (imageSize) {
-        case "small":
-        case "large":
-          return R2Service.getThumbnail(env, ctx, getImageURL(imageType, imageSize, undefined, jpgQuality, imageIdentifier), imageKey);
-        case "full":
-          const url = getImageURL(imageType, imageSize, dpi, jpgQuality, imageIdentifier);
-          return fetch(url);
-        default:
-          throw new Error(`Invalid image size ${imageSize}`);
-      }
-    default:
-      return new Response(`Invalid method ${request.method}. GET or PUT expected.`, { status: 400 });
-  }
+  const response = await (async () => {
+    switch (request.method) {
+      case "GET":
+        switch (imageSize) {
+          case "small":
+          case "large":
+            return R2Service.getThumbnail(env, ctx, getImageURL(imageType, imageSize, undefined, jpgQuality, imageIdentifier), imageKey);
+          case "full":
+            const url = getImageURL(imageType, imageSize, dpi, jpgQuality, imageIdentifier);
+            return fetch(url);
+          default:
+            throw new Error(`Invalid image size ${imageSize}`);
+        }
+      default:
+        return new Response(`Invalid method ${request.method}. GET or PUT expected.`, { status: 400 });
+    }
+  })();
+
+  // Callers (the browser's main thread, and the PDF renderer's Worker context)
+  // fetch() these images cross-origin, which requires an explicit CORS header
+  // on the actual response - the OPTIONS preflight handler alone isn't enough.
+  // The "full" tier previously worked by accident because Google's own response
+  // happens to carry a permissive CORS header; don't rely on that.
+  const headers = new Headers(response.headers);
+  headers.set("Access-Control-Allow-Origin", "*");
+  return new Response(response.body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers,
+  });
 };

image-cdn/tests/handler/image.test.ts

@@ -103,6 +103,20 @@ describe("worker image routing", () => {
     expect(fetchMock).toHaveBeenCalledWith("https://lh4.googleusercontent.com/d/image-id=h2220-rj-l95");
   });
 
+  it.each(["small", "large", "full"] as const)(
+    "sets Access-Control-Allow-Origin on %s image responses regardless of the upstream source's own headers",
+    async (imageSize) => {
+      // the upstream response deliberately carries no CORS header of its own, so this
+      // only passes if the worker adds one itself rather than relying on a passthrough.
+      const fetchMock = vi.fn(async () => new Response("image-bytes", { headers: { "content-length": "11" } }));
+      vi.stubGlobal("fetch", fetchMock);
+
+      const response = await fetchWorker(`http://example.com/images/google_drive/${imageSize}/image-id.jpg`);
+
+      expect(response.headers.get("Access-Control-Allow-Origin")).toBe("*");
+    }
+  );
+
   it("throws for invalid dpi or JPG quality query parameters", async () => {
     await expect(fetchWorker("http://example.com/images/google_drive/full/image-id.jpg?dpi=0")).rejects.toThrow("invalid DPI 0");
     await expect(fetchWorker("http://example.com/images/google_drive/full/image-id.jpg?jpgQuality=101")).rejects.toThrow(