fix: normalize options.headers (again) after onRequest hook (#524)

Author: kricsleo

src/fetch.ts

@@ -114,6 +114,11 @@ export function createFetch(globalOptions: CreateFetchOptions = {}): $Fetch {
 
     if (context.options.onRequest) {
       await callHooks(context, context.options.onRequest);
+      if (!(context.options.headers instanceof Headers)) {
+        context.options.headers = new Headers(
+          context.options.headers || {} /* compat */
+        );
+      }
     }
 
     if (typeof context.request === "string") {
@@ -148,8 +153,6 @@ export function createFetch(globalOptions: CreateFetchOptions = {}): $Fetch {
 
         // Set Content-Type and Accept headers to application/json by default
         // for JSON serializable request bodies.
-        // Pass empty object as older browsers don't support undefined.
-        context.options.headers = new Headers(context.options.headers || {});
         if (!contentType) {
           context.options.headers.set("content-type", "application/json");
         }

test/index.test.ts

@@ -468,6 +468,30 @@ describe("ofetch", () => {
     ).rejects.toThrow("error in onResponseError");
   });
 
+  it("hook modifications", async () => {
+    // onRequest
+    expect(
+      await $fetch(getURL("/echo"), {
+        method: "POST",
+        body: { num: 42 },
+        onRequest(ctx) {
+          ctx.options.headers = new Headers({ "x-foo": "bar" });
+        },
+      }).then((r) => r.headers)
+    ).toMatchObject({ "x-foo": "bar" });
+
+    expect(
+      await $fetch(getURL("/echo"), {
+        method: "POST",
+        body: { num: 42 },
+        onRequest(ctx) {
+          // @ts-expect-error backwards compatibility (with warnings) for object headers
+          ctx.options.headers = { "x-foo": "bar" };
+        },
+      }).then((r) => r.headers)
+    ).toMatchObject({ "x-foo": "bar" });
+  });
+
   it("calls hooks", async () => {
     const onRequest = vi.fn();
     const onRequestError = vi.fn();