javascript - Cookies doesn't work with Cross-site config. I'm using React (Next.js) and Node.js (Express) - Stac

admin管理员组

文章数量:1023195

I'm working in an app with React with Next.js in the frontend and Node.js with Express in the backend. My login works with cookies, in localhost all works better, but when I make the deploy, I have two apps. My frontend app is deployed in now.sh and My backend app is deployed in Heroku. When I try to make a login request in production, all works fine, the cookies are in the response and the header 'Set-Cookie' exists. But my browser (Chrome) doesn't store the cookie in Application >> Cookies and obviously my frontend app doesn't know about the cookie and it's undefined

Here is my code:

Server.js

app.use(
  cors({
    credentials: true,
    origin: process.env.CLIENT_URL, // contains the frontend url
    methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"],
    allowedHeaders: ["Content-Type", "Authorization"],
  })
);

Auth routes when I make the response to the frontend

return res
      .cookie("token", session.token, {
        httpOnly: true,
        sameSite: "None",
        maxAge: 1209600000,
        secure: process.env.NODE_ENV === "production",
      })
      .status(200)
      .json({
        success: true,
        token: session.token,
        user,
      });

Making the request in the frontend

const { data } = await Axios.post(login, // backend url to make the request
      { email, password },
      { withCredentials: true });

Response in the browser

Cookie info in the cookie tab

I'm working in an app with React with Next.js in the frontend and Node.js with Express in the backend. My login works with cookies, in localhost all works better, but when I make the deploy, I have two apps. My frontend app is deployed in now.sh and My backend app is deployed in Heroku. When I try to make a login request in production, all works fine, the cookies are in the response and the header 'Set-Cookie' exists. But my browser (Chrome) doesn't store the cookie in Application >> Cookies and obviously my frontend app doesn't know about the cookie and it's undefined

Here is my code:

Server.js

app.use(
  cors({
    credentials: true,
    origin: process.env.CLIENT_URL, // contains the frontend url
    methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"],
    allowedHeaders: ["Content-Type", "Authorization"],
  })
);

Auth routes when I make the response to the frontend

return res
      .cookie("token", session.token, {
        httpOnly: true,
        sameSite: "None",
        maxAge: 1209600000,
        secure: process.env.NODE_ENV === "production",
      })
      .status(200)
      .json({
        success: true,
        token: session.token,
        user,
      });

Making the request in the frontend

const { data } = await Axios.post(login, // backend url to make the request
      { email, password },
      { withCredentials: true });

Response in the browser

Cookie info in the cookie tab

• javascript
• node.js
• reactjs
• cookies
• next.js

Share Improve this question Follow edited Jul 6, 2020 at 7:19 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Jul 6, 2020 at 7:16 Nicolás LealNicolás Leal 7611 silver badge55 bronze badges 6

• One way to debug your issue if you are using express, create a middleware that will print in the server the headers of the request to see, what information you are working with, I guess should be console.log(request.headers) – juan garcia Commented Jul 6, 2020 at 7:28
• Thanks for the suggestion! I'm trying – Nicolás Leal Commented Jul 6, 2020 at 8:11
• 1 @NicolásLeal were you able to resolve this? I need to take my application to production and facing exactly the same issue – Karan Kumar Commented Nov 27, 2020 at 22:37
• @KaranKumar no ): I can't solve this issue. I think Google changed their policies and now we can't make this type of requets. – Nicolás Leal Commented Nov 30, 2020 at 6:24
• Is there any solution for this? Same thing for spring-boot application and next.js for the client application. Everything is good on local, production not working. – Mert Commented Apr 25, 2022 at 21:27

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 1

I see that the token cookie you are setting is a http-only cookie, so it will not be available to your application.

As quoted in MDN docs

A cookie with the HttpOnly attribute is inaccessible to the JavaScript Document.cookie API; it is sent only to the server. For example, cookies that persist server-side sessions don't need to be available to JavaScript, and should have the HttpOnly attribute. This precaution helps mitigate cross-site scripting (XSS) attacks.

I've been through this 'cookie' issue for the past few days banging my head against the wall. Try to add this line to your server.js before session settings:

app.set("trust proxy", 1);

I'm working in an app with React with Next.js in the frontend and Node.js with Express in the backend. My login works with cookies, in localhost all works better, but when I make the deploy, I have two apps. My frontend app is deployed in now.sh and My backend app is deployed in Heroku. When I try to make a login request in production, all works fine, the cookies are in the response and the header 'Set-Cookie' exists. But my browser (Chrome) doesn't store the cookie in Application >> Cookies and obviously my frontend app doesn't know about the cookie and it's undefined

Here is my code:

Server.js

app.use(
  cors({
    credentials: true,
    origin: process.env.CLIENT_URL, // contains the frontend url
    methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"],
    allowedHeaders: ["Content-Type", "Authorization"],
  })
);

Auth routes when I make the response to the frontend

return res
      .cookie("token", session.token, {
        httpOnly: true,
        sameSite: "None",
        maxAge: 1209600000,
        secure: process.env.NODE_ENV === "production",
      })
      .status(200)
      .json({
        success: true,
        token: session.token,
        user,
      });

Making the request in the frontend

const { data } = await Axios.post(login, // backend url to make the request
      { email, password },
      { withCredentials: true });

Response in the browser

Cookie info in the cookie tab

I'm working in an app with React with Next.js in the frontend and Node.js with Express in the backend. My login works with cookies, in localhost all works better, but when I make the deploy, I have two apps. My frontend app is deployed in now.sh and My backend app is deployed in Heroku. When I try to make a login request in production, all works fine, the cookies are in the response and the header 'Set-Cookie' exists. But my browser (Chrome) doesn't store the cookie in Application >> Cookies and obviously my frontend app doesn't know about the cookie and it's undefined

Here is my code:

Server.js

app.use(
  cors({
    credentials: true,
    origin: process.env.CLIENT_URL, // contains the frontend url
    methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"],
    allowedHeaders: ["Content-Type", "Authorization"],
  })
);

Auth routes when I make the response to the frontend

return res
      .cookie("token", session.token, {
        httpOnly: true,
        sameSite: "None",
        maxAge: 1209600000,
        secure: process.env.NODE_ENV === "production",
      })
      .status(200)
      .json({
        success: true,
        token: session.token,
        user,
      });

Making the request in the frontend

const { data } = await Axios.post(login, // backend url to make the request
      { email, password },
      { withCredentials: true });

Response in the browser

Cookie info in the cookie tab

• javascript
• node.js
• reactjs
• cookies
• next.js

Share Improve this question Follow edited Jul 6, 2020 at 7:19 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Jul 6, 2020 at 7:16 Nicolás LealNicolás Leal 7611 silver badge55 bronze badges 6

• One way to debug your issue if you are using express, create a middleware that will print in the server the headers of the request to see, what information you are working with, I guess should be console.log(request.headers) – juan garcia Commented Jul 6, 2020 at 7:28
• Thanks for the suggestion! I'm trying – Nicolás Leal Commented Jul 6, 2020 at 8:11
• 1 @NicolásLeal were you able to resolve this? I need to take my application to production and facing exactly the same issue – Karan Kumar Commented Nov 27, 2020 at 22:37
• @KaranKumar no ): I can't solve this issue. I think Google changed their policies and now we can't make this type of requets. – Nicolás Leal Commented Nov 30, 2020 at 6:24
• Is there any solution for this? Same thing for spring-boot application and next.js for the client application. Everything is good on local, production not working. – Mert Commented Apr 25, 2022 at 21:27

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 1

I see that the token cookie you are setting is a http-only cookie, so it will not be available to your application.

As quoted in MDN docs

A cookie with the HttpOnly attribute is inaccessible to the JavaScript Document.cookie API; it is sent only to the server. For example, cookies that persist server-side sessions don't need to be available to JavaScript, and should have the HttpOnly attribute. This precaution helps mitigate cross-site scripting (XSS) attacks.

I've been through this 'cookie' issue for the past few days banging my head against the wall. Try to add this line to your server.js before session settings:

app.set("trust proxy", 1);

本文标签：