I am working on a web application using Fastify as backend server and Svelte Kit as frontend. I am having problems sending cookies from the server to the client. I have configured Fastify with the @fastify/cookie plugin and enabled CORS handling using the @fastify/cors package. However, when I send a request from the client, the cookies are not being sent correctly to the client.
On my Fastify server, I have configured CORS and cookie handling as follows:
import Fastify from "fastify";
import cors from "@fastify/cors";
import fastifyCookie from "@fastify/cookie";
const fastify = Fastify();
fastify.register(cors, {
origin: process.env.CORS_ORIGIN,// value: CORS_ORIGIN=http://localhost:5173
credentials: true,
allowedHeaders: ["Content-Type", "Authorization"],
maxAge: 600,
exposedHeaders: ["*", "Authorization"],
});
fastify.register(fastifyCookie, { secret: process.env.COOKIE_SECRET /* COOKIE_SECRET=cloudhub */ });
// ...
// ....
async onSubmit(values, helpers) {
const request = await fetch(`http://127.0.0.1:7878/api/auth/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(values),
});
//....
}
I have verified on the server that the cookie is set correctly in the response by looking at the headers
.
which would be these:
// general
Request URL: http://127.0.0.1:7878/api/auth/login
Request Method: POST
Status Code: 200 OK
Remote Address: 127.0.0.1:7878
Referrer Policy: strict-origin-when-cross-origin
// response headers:
access-control-allow-credentials: true
access-control-allow-origin: http://localhost:5173
access-control-expose-headers: *, Authorization
Connection: keep-alive
content-length: 299
content-type: application/json; charset=utf-8
Date: Sun, 04 Jun 2023 23:00:49 GMT
Keep-Alive: timeout=72
set-cookie: accessToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6Ijg3ZDljMDUzLWE2NjktNDRhNC1iYmEzLWI0Y2Q1MmNmNWViNyIsImVtYWlsIjoiam9obmRvZUBleGFtcGxlLmNvbSIsImlhdCI6MTY4NTkxOTY0OSwiZXhwIjoxNjg4NTExNjQ5fQ.dlfnDvbB8QkN2eSIbhD6yFC_31ZX1bNaEr4PEhgGThI; Path=/; Expires=Mon, 19 Jun 2023 23:00:49 GMT; HttpOnly; SameSite=None
vary: Origin
// request headers
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,es;q=0.8
Connection: keep-alive
Content-Length: 50
Content-Type: application/json
Host: 127.0.0.1:7878
Origin: http://localhost:5173
Referer: http://localhost:5173/
sec-ch-ua: "Brave";v="113", "Chromium";v="113", "Not-A.Brand";v="24"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Linux"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
Sec-GPC: 1
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
However, when reviewing the request in the Network tab of the browser, I do not see the cookie sent.
What am I doing wrong, how can I make sure that cookies are sent correctly from the client to the server and vice versa?
Any help or suggestions would be greatly appreciated. thanks!
If you use an API to send a cookie, it will appear in the response cookie rather than the header.
Please check the example code below:
reply.setCookie('myCookie', "xxxxxxxx", {
domain: 'example.com', // same options as before
path: '/',
signed: true
})