Fetch is throwing Error "Headers cannot be modified" when deployed to vercel

[shorthander]

Summary

Hi all,
I am stumbling over a weird behaviour. The application I have build is working fine in yarn dev or also with a local build. But if I deploy it to vercel its no longer working.

I am working with Next 14.1.3 and App Router. I am using the src folder with typescript.

On vercel I receive the following error.

Headers cannot be modified. Read more: https://nextjs.org/docs/app/api-reference/functions/headers

Here is a link to a simple reproduction of the error:
https://next-fetch-issue.vercel.app/

And here is the code base:
https://github.com/shorthander/next-fetch-issue

It seems to be related to the appended headers() to the fetch function.
After adding this the deployment is no longer working.
If I run yarn build and yarn start locally everything still works fine. Just the deployed version is not working.
It also seems to be independent of the next version. I have tried it with 14.1.3 as well as with next 13.4.19

Any hints what I could look for?
It it the right way to forward auth cookies server component to route handler? I was applying the things out of this tutorial:
https://jonmeyers.io/blog/forwarding-cookies-from-server-components-to-route-handlers-with-next-js-app-router

Additional information

No response

Example

https://github.com/shorthander/next-fetch-issue

[icyJoseph]

What Node version does your Vercel deployment have? Which one do you have locally? Make sure they are around the same version. Meanwhile I take a look at what else could be going on.

[icyJoseph]

Alright, that is a good start anyway, we don't want to be running in circles because of Node.js versions. I'll take a look at the logs.

[shorthander]

Hi Joseph,
were you able to get an idea what could happen there? Thank you for your help! Really appreciate it.

[icyJoseph]

@shorthander hi, the logs are behind a login, so there was nothing there.

[icyJoseph]

Does it change anything to do headers: new Headers(headers())

I wonder if internally something has changed on the getter function.

[shorthander]

Here are the vercel logs. Hope this helps as well.
logs_result.json

[shorthander]

@shorthander hi, the logs are behind a login, so there was nothing there.

@icyJoseph I have put the logs here. Is there something wrong with them? I dont get it what you mean by behind a login.

[icyJoseph]

Aha, for some reason I couldn't see them before.

It does look like something is trying to mutate the headers though. I can't see in the code what the issue could be.

[shorthander]

Does it change anything to do headers: new Headers(headers())

I wonder if internally something has changed on the getter function.

uh that one fixed it.
Is this the proper fix or just a workaround? :)
Thank you very much!

[icyJoseph]

I'd say, since you have a bug with a - repository to reproduce and a workaround, maybe you should open an issue.

[shorthander]

alright will do so :) thank you again for your help. will open a bug ticket for it.

[PSMJonas]

Got the same issue.

headers: new Headers(headers()) fixed it for now.

[Aikay-dev]

Who has an explanation to what is going on exactly, I am modifying the headers in my middleware and it works fine on local dev but not on vercel prod. The site crashes instantly and throws that headers cannot be modified error

[jacobdarvin]

Same, it works perfectly fine now with this fix but I'd really like an explanation of why this is

[umutseven92]

We have just run into this problem. Replacing headers: headers() with headers: new Headers(headers()) fixed it.
Funny enough, having headers: headers() in middleware.ts does not cause this error, but having it in a Server Component (specifically a page.tsx in our case) does.

[aaronjones1]

I'm also experiencing this in Next.js v14.1:

• I'm setting CORS headers in next.config.js for a specific path within the api folder of the App Router.
• I'm using the same header strategy for all route handlers in the app and I'm only seeing this behavior for the path with the handler that is having the CORS headers added.
• The above workaround (new Headers(headers())) resolved the issue for the affected route handler.

I do know that headers created with the Headers() constructor do not have modification restrictions (see: https://developer.mozilla.org/en-US/docs/Web/API/Headers#modification_restrictions). Maybe Next.js attempts to add the CORS headers from next.config.js after the route handler runs?