fix(openapi-fetch): fix headers for FormData

We need to delete the `Content-Type` header if the serialized body is a `FormData`. This allows the browser to set the `Content-Type` and boundary expression correctly.

Resolves #1191

Author: psychedelicious

.changeset/orange-comics-sip.md

@@ -0,0 +1,5 @@
+---
+"openapi-fetch": patch
+---
+
+Fix header handling for FormData

packages/openapi-fetch/README.md

@@ -218,6 +218,17 @@ const { data, error } = await put("/submit", {
 });
 ```
 
+If your `body` is already a `FormData`, provide an identity function:
+
+```ts
+const { data, error } = await put("/submit", {
+  body: myFormData,
+  bodySerializer: (body) => body,
+});
+```
+
+For `multipart/form-data`, [do not set the `Content-Type` header](https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects#sending_files_using_a_formdata_object). The browser will set that for you, along with the boundary expression, which serves as a delimiter for the form fields.
+
 ## 🎯 Project Goals
 
 1. Infer types automatically from OpenAPI schemas **without generics** (or, only the absolute minimum needed)

packages/openapi-fetch/src/index.test.ts

@@ -272,9 +272,6 @@ describe("client", () => {
       const client = createClient<paths>();
       mockFetchOnce({ status: 200, body: "{}" });
       const { data } = await client.put("/contact", {
-        headers: {
-          "Content-Type": "multipart/form-data",
-        },
         body: {
           name: "John Doe",
           email: "[email protected]",
@@ -293,6 +290,9 @@ describe("client", () => {
       // expect post_id to be encoded properly
       const req = fetchMocker.mock.calls[0][1];
       expect(req.body).toBeInstanceOf(FormData);
+
+      // TODO: `vitest-fetch-mock` does not add the boundary to the Content-Type header like browsers do, so we expect the header to be null instead
+      expect((req.headers as Headers).get("Content-Type")).toBeNull();
     });
   });
 

packages/openapi-fetch/src/index.ts

@@ -122,9 +122,11 @@ export default function createClient<Paths extends {}>(clientOptions: ClientOpti
       redirect: "follow",
       ...options,
       ...init,
-      headers: baseHeaders,
     };
     if (requestBody) requestInit.body = bodySerializer(requestBody as any);
+    // remove `Content-Type` if serialized body is FormData; browser will correctly set Content-Type & boundary expression
+    if (requestInit.body instanceof FormData) baseHeaders.delete("Content-Type");
+    requestInit.headers = baseHeaders
     const response = await fetch(finalURL, requestInit);
 
     // handle empty content