cookie not sent from pages .astro client (SSR mode)

[hardy heron]

[solved] I'm loving Astro - Thank you ! - particularly with SSR...amazing. I tried fetch, axios and XMLHttpRequest (and using a script tag like the docs example recaptcha fetch) each with credentials: include (or withCredentials: true). Network tab confirms request headers from .astro client page does not include cookies. Using curl to the backend, cookies are sent. I also read the thread of cerpow 06/02/2022.

[glacial junco]

I am not sure but I think it has to do with cross site cookie ?
For example,
u got a backend and backend sent cookie to the frontend
and if u have like secure and http only attributes in the cookie
It still sends with request to the backend ( u can check the header )
but it can't be get by Astro Server Side Code ?

I once got that issued with astro SSR but
I was using cookies for getting user info and not for anything important, so it was not a concern

[hardy heron]

Thanks: yes that's right...cookies don't get attached to RequestHeader. It's critical for auth to make this work. Most of the other posts are about problems retrieving sent-cookies at backend. I'm having no trouble at backend getting cookies (confirmed by using curl). I saw that was a bug about 8 months ago but since fixed. Crepow's thread title is same as mine, but in the thread Crepow can send cookies with inline script (did not work for me) and so that thread turned out to be the different problem of retrieving them at backend. Regarding cross-site as you suggested, I'm testing localhost:3000 to localhost:3000 - one route simply to another - and that's same site. I used the default astro.build docs template which creates a prefs cookie (not httpOnly not secure) so everyone else (it would seem) would run into this problem when using SSR. I added a second httpOnly secure sid cookie for auth. Routing to each page in Chrome, I see both cookies, neither get sent back.

...just simulated production build and tested in preview mode (using 127.0.0.1:3000 also to 127.0.0.1:3000). Network tab shows cookies are send from backend to client page, but on fetch no cookies are in the Request Headers.

[glacial junco]

umm

[fast bloom]

Having the same issue here, frontmatter simply does not include cookie, I'm using { credentials: 'include' } with fetch. Using the same exact script in the browser console works just fine, but frontmatter fails. My backend express server does not see any cookies sent by frontmatter. This is running SSR in dev mode

[next thunder]

Hi troops, how are we all? I am presuming you are running this in SSR mode, if so we do provide some additional primatives to help with this.
Setting cookies can be done using the Astro.cookies()<Map> api,

More Information about this and the Astro.response API can be found here, https://docs.astro.build/en/reference/api-reference/#astroresponse

[fast bloom]

Hi aFuzzyBear, thanks for reaching back, I've just tried to use the following code in frontmatter but no luck:

const cookie = Astro.cookies.get('connect.sid');
Astro.response.headers.set('Set-Cookie', `connect.sid=${cookie.value}; Path=/;`);
const cookie2 = Astro.request.headers.get('connect.sid');

const employeeId = 265;
const response = await fetch(`http://127.0.0.1:3025/employees/${employeeId}`, { credentials: 'include' });
const employee = JSON.stringify(await response.json());

The backend receives the following headers (RAW):
accept,*/*,accept-encoding,gzip, deflate, br,connection,close,user-agent,node-fetch,Host,127.0.0.1:3025

[next thunder]

Ah there is two sets of headers you are needing to set here, one in the fetch for the call to the backend, and the Astro.cookies is what is sent to the front-end

[fast bloom]

Thanks, it worked now. I used the same syntax as for node-fetch library (since setting cookie header is forbidden on the front end) but is completely fine in frontmatter since it's also actually ran on the server. Honestly did not expect frontmatter to be able to set it as well as the docs kind of make you think it's the front end fetch API that's used: https://docs.astro.build/en/guides/data-fetching/#:~:text=global fetch() function, even if we know frontmatter is ran on a server, we don't know which one and what's the setup for things like this. As a suggestion I think the docs can be updated to note the differences in the Fetch API and also how exactly frontmatter is setup could provide some insight as well (albeit this would still require digging in this case).

Going to link my working version here if it helps @hardy heron

const cookie = Astro.cookies.get('connect.sid');
const headers = {
    'Cookie': `connect.sid=${cookie.value}`
};
const employeeId = 265;
const response = await fetch(`http://127.0.0.1:3025/employees/${employeeId}`, { headers });
const employee = JSON.stringify(await response.json());