Express backend has issues receiving subdomain cookies using CORS and Cookie-Parser

Question

I'm currently developing a MERN (MongoDB, Express, React, Node.js) application and I'm having an issue with receiving cookies from a subdomain in the Express backend. I have CORS and cookie handling set up and everything works fine when using a simple localhost origin, but am having trouble handling subdomains.

Here is a summary of the steps I took and the issues I faced:

Set cookie when logged in:

res.cookie("token", token, {
    httpOnly: true,
    sameSite: "none",
    path: "/",
    secure: true,
  });

When I try to get this cookie using the cors settings, where the origin is:

app.use(
  cors({
    origin: "http://localhost:3000",
    credentials: true,
  })
);

But when testing, when I use the subdomain origin, like this:

app.use(
  cors({
    origin: "http://binbros.localhost:3000",
    credentials: true,
  })
);

There are no errors with CORS on the frontend, and the cookie is successfully created on the frontend. But when I try to access the cookies using this CORS setting, I don't receive any cookies. But using the same method and CORS setup to a simple localhost, I can get all cookies normally without any issues.

console.log(req.cookies);

P.S： When I'm on localhost and origin is localhost, and I log the cookie, I can get all the frontend cookies, not just the one I created in the backend but When I'm on the subdomain's origin, I don't even receive a cookie on the backend, None created by me, nor any from the frontend

Answer 1

When using subdomains in a development environment like subdomain.localhost, you may encounter additional challenges due to browser security policy restrictions. Browsers often treat different subdomains as independent origins, which may affect cookie and CORS behavior.

In a development environment, the secure property is best set to false.

res.cookie("token", token, {
    httpOnly: true,
    sameSite: "none",
    path: "/",
    secure: false,
  });

Check your systemhostsFile:

127.0.0.1 binbros.localhost

Check on the front end whether the API is called from the binbros.localhost domain name, and check Access-Control-Allow-Credentials

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials