fix: multipart form data boundary gets overridden client-side [INC-14…

…1] (#1992)
fern-api · Jan 12, 2025 · 9bc5425 · 9bc5425
1 parent dca62fe
commit 9bc5425
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 148 deletions.
diff --git a/packages/fern-docs/bundle/src/server/__test__/buildFormData.test.ts b/packages/fern-docs/bundle/src/server/__test__/buildFormData.test.ts
diff --git a/packages/fern-docs/bundle/src/server/buildFormData.ts b/packages/fern-docs/bundle/src/server/buildFormData.ts
diff --git a/packages/fern-docs/bundle/src/server/buildRequestBody.ts b/packages/fern-docs/bundle/src/server/buildRequestBody.ts
diff --git a/packages/fern-docs/ui/src/playground/fetch-utils/executeProxyRest.ts b/packages/fern-docs/ui/src/playground/fetch-utils/executeProxyRest.ts
@@ -8,10 +8,16 @@ const PROXY_URL = "https://proxy.ferndocs.com/";
 export async function executeProxyRest(
   req: ProxyRequest
 ): Promise<PlaygroundResponse> {
-  const requestHeaders = { ...req.headers };
-  requestHeaders["X-Fern-Proxy-Request-Headers"] = Object.keys(
-    req.headers
-  ).join(",");
+  const requestHeaders = new Headers(req.headers);
+  requestHeaders.set(
+    "X-Fern-Proxy-Request-Headers",
+    Object.keys(req.headers).join(",")
+  );
+
+  // multipart/form-data will be handled by the fetch API with a boundary, and should not be forwarded
+  if (req.body?.type === "form-data") {
+    requestHeaders.delete("Content-Type");
+  }
 
   const res = await fetch(urljoin(PROXY_URL, req.url), {
     method: req.method,

diff --git a/packages/fern-docs/ui/src/playground/fetch-utils/executeProxyStream.ts b/packages/fern-docs/ui/src/playground/fetch-utils/executeProxyStream.ts
@@ -13,6 +13,11 @@ export async function executeProxyStream(
     Object.keys(req.headers).join(",")
   );
 
+  // multipart/form-data will be handled by the fetch API with a boundary, and should not be forwarded
+  if (req.body?.type === "form-data") {
+    requestHeaders.delete("Content-Type");
+  }
+
   const response = await fetch(urljoin(PROXY_URL, req.url), {
     method: req.method,
     headers: requestHeaders,

diff --git a/packages/fern-docs/ui/src/playground/fetch-utils/requestToBodyInit.ts b/packages/fern-docs/ui/src/playground/fetch-utils/requestToBodyInit.ts
@@ -14,9 +14,17 @@ export async function toBodyInit(
       const formData = new FormData();
       for (const [key, value] of Object.entries(body.value)) {
         switch (value.type) {
-          case "json":
-            formData.append(key, JSON.stringify(value.value));
+          case "json": {
+            formData.append(
+              key,
+              value.contentType
+                ? new Blob([JSON.stringify(value.value)], {
+                    type: value.contentType,
+                  })
+                : JSON.stringify(value.value)
+            );
             break;
+          }
           case "file":
             if (value.value?.dataUrl != null) {
               const response = await fetch(value.value.dataUrl);

diff --git a/packages/workers/proxy/src/index.ts b/packages/workers/proxy/src/index.ts
@@ -53,16 +53,6 @@ export default {
       }
     }
 
-    // multipart/form-data will be handled by the fetch API with a boundary, and should not be forwarded
-    if (
-      requestHeaders
-        .get("Content-Type")
-        ?.toLowerCase()
-        .includes("multipart/form-data")
-    ) {
-      requestHeaders.delete("Content-Type");
-    }
-
     const newRequest = new Request(forwardedUrl, {
       method: request.method,
       headers: requestHeaders,

diff --git a/packages/workers/proxy/test/index.spec.ts b/packages/workers/proxy/test/index.spec.ts
@@ -150,8 +150,8 @@ describe("rest", () => {
         return methodNotAllowed();
       }
 
-      // content-type should not be set because form-data will be automatically parsed and set as multipart/form-data + boundary
-      expect(headers.get("content-type")).toBeNull();
+      // the content-type must include a boundary
+      expect(headers.get("content-type")).toContain("boundary=");
       const bodyText = await fromReadableStream(body);
       const formData = new FormData();
       const boundary = bodyText.split("\r\n")[0];