Cookie 未在 NodeJS 和 NextJS 的请求中设置

Question

I'm developing a fullstack app with Node + Express backend and NextJS front end (separate servers) and am having trouble requesting the browser to attach the cookie vended down as part of the response header from the node server. Here's the setup:

1. Node server is running on localhost:3000 and NextJs server is running on localhost:3001.
2. I have set up alias in etc/hosts to route someAlias.com to 127.0.0.1.

Using the front end UI (port 3001) I was able to vend the cookie with JsHttp's cookie module with the following code from the backend (port 3000):

import { serialize } from 'cookie';
...
const cookie = serialize(TOKEN_NAME, TOKEN_VAL, {
  httpOnly: true,
  sameSite: 'none',
});

I was able to observe the Set-Cookie header in the response.

However, in the subsequent requests, I did not see the cookie being attached. I have tried fiddling with the above cookie serialization params with no success:

Here are the arguments I've tried:

• domain: ['.someAlias.com:3000', '.someAlias.com:3001']
• path: '/'
• domain: '.someAlias.com'

I have a feeling it might just be due to front end and back end server ports being different, but all requests have been initiated on the client side going to localhost:3000 (backend port). So not sure what I've possibly done wrong here.

====== UPDATE =======

I've run a couple more experiments, and found out that when I'm accessing a URL directly, NextJs renders the page server-side. When I'm transitioning between pages within the app, the page is rendered client-side where it queries the backend port 3000 directly. Unfortunately in neither scenario did I see any cookie being set...

Answer 1

You should set serialized cookie with res.set Express method.

Alternatively, you can use res.cookie method without additional cookie package like this:

res.cookie(TOKEN_NAME, TOKEN_VAL, {
  httpOnly: true,
  sameSite: 'none',
});

Note, you shouldn't worry about different ports on the same domain, since cookies are not isolated by port but domain only. No matter what port you use, cookies should be visible.

Answer 2

Since you said, "I was able to observe the Set-Cookie header in the response", I believe your node.js setting correct.

When you get response from node js, you need to set cookies, which can be done with a npm packages easily. I will demonstrate with js-cookie :

 import Cookies from "js-cookie";

you write a reusable function to set the cookies:

setSession(authResult) {
    //converting everything to miliseconds
    const expiresAt =
      JSON.stringify(authResult.expiresIn * 1000) + new Date().getTime();
    // I just put  properties. I dont know how project sets
    Cookies.set("user", authResult.idTokenPayload);
    Cookies.set("jwt", authResult.idToken);
    Cookies.set("expiresAt", expiresAt);
  }

Everytime you make request you have to set headers. You have to retrieve cookies based on if you are on browser or on server. So you have to write a function if you are on server. Since I demonstrated how to set cookies with js-cookies , you can get the cookies easily on the browser. This reusable function to retrieve the cookie if you are on the server:

// cookieKey: I set three "user", "jwt","expiresAt"
export const getCookieFromReq = (req, cookieKey) => {
  console.log("req.headers", req.headers);
  // cookies are attached to the req.header.cookie. 
  const cookie = req.headers.cookie
    .split(";")
    .find((c) => c.trim().startsWith(`${cookieKey}=`));

  if (!cookie) return undefined;
  return cookie.split("=")[1];
};

Now you have to write a function to set the headers:

import Cookies from "js-cookie";
import { getCookieFromReq } from "./directoryOf";

export const setAuthHeader = (req) => {
  const token = req ? getCookieFromReq(req, "jwt") : Cookies.getJSON("jwt");

  if (token) {
    return {
      headers: { authorization: `Bearer ${token}` },
    };
  }
  return undefined;
};

Now when you make request, you have to use this setAuthHeader . For example:

 await axiosInstance
    .post("/blogs", blogData, setAuthHeader())
    .then((response) => response.data)
    .catch((error) => rejectPromise(error));

Answer 3

SAMESITE NONE

If you use SameSite=none you also need to use Secure , meaning SSL must also be used. You are then saying that your 2 servers are from unrelated domains, which is probably not what you want, since browsers will drop cookies aggressively.

LOCAL PC OPTIONS

Use these settings initially on your development computer, and ensure that all URLs used in the browser and Ajax calls use http://somealias.com:3000 and http://somealias.com:3001 rather than localhost. Cookies will then stick on a development computer.

• Domain=.somealias.com
• Path=/
• SameSite=strict
• HTTP Only

DEPLOYED OPTIONS

When you deploy to a proper environment, also use SSL and set the cookie option Secure . Most importantly, the two domains must meet hosting prerequisites of sharing the same base domain, eg:

• https://www.example.com
• https://api.example.com

This ensures that cookies issued are considered first party and in the same site, so that they are not dropped. If preconditions are not met, there is nothing you can do in code to fix the problem.

SIMILAR RESOURCE

This Curity code example uses local development domains and same site cookie settings similar to those I've used above and may be useful to compare against.

Answer 4

the cookies must be sent directly from the browser to the server, which is not the case when you use nextJs. because when you access to your app next js will server side render your page and then the request will be sent from nextjs server to your nodejs server so the browser will send the cookies to nextjs server not to your nodejs server. the solution is to send cookies manually from nextjs server to nodejs. example with fetchApi and getServerSideProps function:

export async function getServerSideProps(context){ 
  try{
       const res = await fetch(`your-api-endpoint`, {
          method: 'GET',
          credentials:'include',
          headers: {
             'Access-Control-Allow-Credentials': true,
             Cookie: context.req.headers.cookie
          },
    })
    const data = await res.json()
    if(!res.ok){
       throw data 
    }
    }catch(err){
       return console.log(err)
    }

    return {
      props: {
         data
      }
    }
}