express - Cookies from separate api with Next.js

Question

I am currently making a Next.js app and I am having issues with cookies. I have an express API running on localhost:3001 which sets cookies when I signup/signin using express-cookie-session library. Whenever I do it through postman it works fine, however when I do it from next app an api it doesn't have "Set-Cookie" header in the response. I suspect it has to do with next app and express being on different ports and express being unable to set cookies to the next app however I'm unsure what to do about it. If it matters I wanted to set JWT's this way. It's possible to send them in response body but I would like to know how I could do it through the cookies.

Here are some relevant configurations:

app.use(cors());
app.set('trust proxy', true);
...
app.use(cookieSession({ signed: false, secure: false, sameSite: "lax" }));

a sign up controller:

const signUp = async (req: Request, res: Response, next: NextFunction) => {
  ...
  const accessToken = TokenGenerator.generateAccessToken(user);
  const refreshToken = TokenGenerator.generateRefreshToken(user);
  user.refreshToken = refreshToken;
  ...
  req.session = { accessToken, refreshToken };
  res.send(user);
};

and getServerSideProps function

export const getServerSideProps = async (ctx) => {
  const headers = ctx.req.headers;
  const res = await axios.get("http://localhost:3001/users/current-user", {
    headers,
  });
  return { props: { data: res.data } };
};

EDIT: Set-Cookie header is actually shown in chrome console however it isn't being console logged from axios response.

Here's example of cookie:

Set-Cookie: express:sess=eyJhY2Nlc3NUb2tlbiI6ImV5SmhiR2NpT2lKSVV6STFOaUlz
SW5SNWNDSTZJa3BYVkNKOS5leUpwWkNJNklqVm1abVEyTldSalpURXlaak5pT0RVellUWXlNR0
psT0NJc0ltVnRZV2xzSWpvaWJHdHNiaUlzSW1saGRDSTZNVFl4TURRME1qSXdOQ3dpWlhod0lq
b3hOakV3TkRReU1qRTVmUS5NN2szX1BVQy1hbzRQb2w4OXNiS05ndS1ndkpqNEVfUWdoX2RHSU
ZrZlZFIiwicmVmcmVzaFRva2VuIjoiZXlKaGJHY2lPaUpJVXpJMU5pSXNJblI1Y0NJNklrcFhW
Q0o5LmV5SnBaQ0k2SWpWbVptUTJOV1JqWlRFeVpqTmlPRFV6WVRZeU1HSmxPQ0lzSW1WdFlXbH
NJam9pYkd0c2JpSXNJbWxoZENJNk1UWXhNRFEwTWpJd05IMC5JdHA2WHh4aFRPMWJUc0oydGNM
ZU9hdFB3cWZWdWRsVmRQWkNnejB3eS1rIn0=; path=/; domain=http://localhost:3000.

question from:https://stackoverflow.com/questions/65679961/cookies-from-separate-api-with-next-js

Answer 1

I found a solution to this by adding this line to my server configuration: app.use(cors({ origin: "http://localhost:3000", credentials: true })); as well as setting withCredentials to true on my axios request.