Search code examples
javascripttypescriptcookiessveltefastify

Problem sending cookies from server in Fastify and to application in Svelte Kit


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!


Solution

  • 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
    })