Cookie has been rejected because it is in a cross-site context (Nginx, Nextjs, Rocket)

Question

My development workflow is as follow: I access the frontend via https://client.my-project:3001. Nginx proxies it to nextjs's local server at localhost:3000. In a react component there's a function handlesubmit in which fetch sends a post request to the backend. I use Nginx as a reverse proxy between nextjs and the backend. The backend's response contains a cookie configured with secure, HttpOnly, same site strict. The cookie is rejected in the browser with the following message cookie “id” has been rejected because it is in a cross-site context and its “samesite” is “lax” or “strict”.

Here is the conf file for nginx:

upstream api {
  server localhost:8000;
}

upstream client {
  server localhost:3000;
}

server {
  listen 3001 ssl;
  server_name client.my-project;
  ssl_certificate /client/client.my-project.pem;
  ssl_certificate_key /client/client.my-project.pem;

  location / {
    proxy_pass http://client;
  }

  location /_next/webpack-hmr {
    proxy_pass http://client/_next/webpack-hmr;
    proxy_http_version 1.1;
    proxy_set_header upgrade $http_upgrade;
    proxy_set_header connection "upgrade";
}

}

server {
  if ($http_origin = https://client.my-project:3001) {
    set $allowed_origin 'https://client.my-project:3001';
  }

  listen 4545 ssl;
  server_name api.my-project;
  ssl_certificate /api/api.my-project.pem;
  ssl_certificate_key /api/api.my-project-key.pem;

  location / {

    add_header 'access-control-allow-origin' $allowed_origin always;
    add_header 'access-control-allow-credentials' 'true' always;
    add_header 'access-control-allow-headers' 'authorization,accept,origin,dnt,x-customheader,keep-alive,user-agent,
    x-requested-with,if-modified-since,cache-control,content-type,content-range,range';
    add_header 'access-control-allow-methods' 'get,post,options,put,delete,patch';

    proxy_pass https://api;
  }
}

Here is how I use fetch to send a POST request to the backend.

const response = await fetch(`${process.env.NEXT_PUBLIC_API}/user`, {
    mode: 'cors',
    method: 'POST',
    body: formData,
    credentials: 'include'
});

And here is how the cookie is created in the backend:

    let cookie = Cookie::build("id", session_id)
        .secure(true)
        .http_only(true)
        .same_site(SameSite::Strict)
        .finish();

I want to avoid setting the cookie to same site none.

Cookie has been rejected because it is in a cross-site context (Nginx, Nextjs, Rocket)

0 Answers0