[NEXT-735] Using headers.append twice with the Set-Cookie header only adds a single header

[controversial]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.4.0: Fri Feb 10 08:08:36 PST 2023; root:xnu-8796.100.721.505.3~4/RELEASE_ARM64_T6000
Binaries:
  Node: 19.6.0
  npm: 9.4.0
  Yarn: 3.3.1
  pnpm: N/A
Relevant packages:
  next: 13.2.2-canary.3
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/mystifying-babbage-ruhtyx?file=%2Fpages%2Fapi%2Ftest.ts

To Reproduce

Visit /api/test with devtools open to observe the cookies sent with the request.

Describe the Bug

Only a single Set-Cookie header is sent and only a single cookie is set:

Expected Behavior

Two Set-Cookie headers should be added, as the fetch standard specifies.

This issue is very similar to #38302; @balazsorban44 asked that I open this issue to track this separate reproduction!

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-735

[xriter]

Even when doing it manually, it only sets one header:

return new Response(null, {
	headers: [
		[
			"Set-Cookie",
			cookie.serialize("cookie1", "myval1", {
				maxAge: 3600,
				path: "/",
			}),
		],
		[
			"Set-Cookie",
			cookie.serialize("cookie2", "myval2", {
				maxAge: 3600,
				path: "/",
			}),
		],
	],
});

gives

< HTTP/1.1 200 OK
< vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch
< set-cookie: cookie1=myval1; Max-Age=3600; Path=/, cookie2=myval2; Max-Age=3600; Path=/
< Date: Wed, 01 Mar 2023 16:32:00 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5
< Transfer-Encoding: chunked

They are being serialised with a comma, instead of adding two separate headers.

It might be a bug in the Fetch api (see https://www.ryadel.com/en/fetch-api-bug-get-set-multiple-set-cookie-headers/)
I have not been able to find a fix yet...

[qq99]

Just ran into this too, following

[raphaelbadia]

Related to vercel/edge-runtime#283

[dillondotzip]

Apparently there's been a fix for this that's merged into canary, but still getting the same issue. Even on localhost.

[xriter]

@dillonraphael Could you share the link of the pull request that's supposed to fix this you are referring to?

[artemavrin]

In middleware setting 2 cookies works as it should, but in app/route, it sets only the first value

[abuinitski]

IMO Fetch API not to be blamed here, this must be very specific to Next API Routes implementation (or whatever underlying http rendering mechanism that it's using).

It all seems like API Routes do not handle an easy-to-miss edge case that is specific to Set-Cookie. This is a special header, the only one that has this funny behavior when multiple values are to be rendered into repeating header (vs. one header instance with values joined by comma).

Writing all this to ping that issue still exists in today's canary, and it hurts.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.