Read repeated header values from fetch

[bgschiller]

I also asked this in the Discord but didn't get to a resolution. I'm thinking this might be a feature request?

When I use fetch from a server context, I'm able to access the set-cookie header. However, the server sent several of them, and they're combined into a single comma-separated value by the time I'm able to read it.

server sends

set-cookie: order_form_id=12; domain=multiple-set-cookies.bgschiller.repl.co;  expires=Fri, 01 Apr 2022 17:09:58 GMT; path=/
set-cookie: project_id=8; domain=multiple-set-cookies.bgschiller.repl.co; expires=Fri, 01 Apr 2022 17:09:58 GMT; path=/

I receive

set-cookie: order_form_id=12; domain=multiple-set-cookies.bgschiller.repl.co;  expires=Fri, 01 Apr 2022 17:13:17 GMT; path=/, project_id=8; domain=multiple-set-cookies.bgschiller.repl.co; expires=Fri, 01 Apr 2022 17:13:17 GMT; path=/

Unfortunately, I can't just split on commas, as the expire dates also have commas. So there's no clean way to get individual header values.

I'm trying to proxy some routes to another server, so I need to rewrite the cookie domains to match my server and not the origin server. I have a workaround using an express server instead of the remix dev server. But presumable there are other use cases for reading repeated headers as separate entities?

@sergiodxa asked some follow-up questions in the Discord, which I'll repost here.

sergiodxa: is there no headers.getAll?
I don't think there's a headers.getAll, I get this error: "property getAll does not exist on type Headers"

sergiodxa: if you know the cookie name and the config, you could also create a Cookie object with Remix's createCookie function
then do await cookie.parse(cookieHeader) to get the value. another option in case headers.getAll doesn't exists or using createCookie doesn't work is to use cookie-js library to parse the cookie from the header

I'd prefer to avoid hard-coding the name of the cookie, since it's owned by a third party and they might change it at some point. Even then, createCookie assumes a particular format for serialization—base64-encoded json.

I've written my own version of createCookie that skips base64 and json.stringify, but the underlying cookie.parse function doesn't seem to find the project_id properly. Check this out:

> const cookie = require('cookie'); // same lib used by remix-server-runtime/cookies.ts
> cookie.parse('order_form_id=12; domain=multiple-set-cookies.bgschiller.repl.co;  expires=Fri, 01 Apr 2022 17:13:17 GMT; path=/, project_id=8; domain=multiple-set-cookies.bgschiller.repl.co; expires=Fri, 01 Apr 2022 17:13:17 GMT; path=/')
{
  order_form_id: '12',
  domain: 'multiple-set-cookies.bgschiller.repl.co',
  expires: 'Fri, 01 Apr 2022 17:13:17 GMT',
  path: '/, project_id=8'
}

Check out the path value. It ate the name part of the next cookie, because it was looking for the next semicolon and the two headers were combined with a comma.

Is this the cookie-js library you meant? https://www.npmjs.com/package/cookie

I think I'd still need to get access to a more raw version of the headers in order to use it

TLDR

when I access request.headers['set-cookie'], the multiple header values have already been joined into a single string. I want a way to access each individual value rather than the comma-separated string.

Minimal reproducible example

the /proxy-pls route of bgschiller/remix-read-repeated-header tries to manipulate several set-cookie headers. Take a look at the entry.server.tsx file.

[kiliman]

I did some research and it appears the issue stems from node-fetch v2.x. When dealing with headers, it uses an internal object to manage the key/values. Unfortunately when returning the value via get, it returns multi-valued keys as a comma-delimited string. There is no getAll method.

https://github.com/node-fetch/node-fetch/blob/838d9713ef5e673bbd86768fd22ba98ec461ed9d/src/headers.js#L112-L121

I created a test project and when I use curl to fetch the endpoint, I see the correct headers:

HTTP/1.1 200 OK
set-cookie: foo=bar; Path=/; HttpOnly; Expires=Wed, 21 Oct 2035 07:28:00 GMT
set-cookie: test=abc; Path=/; HttpOnly; Expires=Thu, 22 Oct 2035 07:28:00 GMT
Content-Type: application/json; charset=utf-8
Vary: Accept-Encoding
Date: Fri, 18 Mar 2022 20:13:23 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked

There is a workaround to get the correct header values, but requires use of a non-standard method:

const cookieHeaders = response.headers.raw()["set-cookie"];
//output
[
  'foo=bar; Path=/; HttpOnly; Expires=Wed, 21 Oct 2035 07:28:00 GMT',
  'test=abc; Path=/; HttpOnly; Expires=Thu, 22 Oct 2035 07:28:00 GMT'
]

This will return an array with all the values.

In node-fetch v3.x they changed the Headers class to extend URLSearchParams so you'll be able to use response.headers.getAll('set-cookie')

Remix still uses v2.x, because that's the latest version that support CJS. v3.x switched to ESM-only.

headers.raw() non-spec api
https://github.com/node-fetch/node-fetch/blob/838d9713ef5e673bbd86768fd22ba98ec461ed9d/src/headers.js#L204-L211