how to get cookie in react passed from express js api (MERN stack)-CodePudding

I have an api in express js that stores token in cookie on the client-side (react). The cookie is generated only when the user logins into the site. For example, when I test the login api with the postman, the cookie is generated as expected like this:

But when I log in with react.js then no cookie is found in the browser. Looks like the cookie was not passed to the front end as the screenshot demonstrates below:

As we got an alert message this means express api is working perfectly without any error!!

Here is my index.js file on express js that includes cookie-parser middleware as well

require("dotenv").config();
const port = process.env.PORT || 5050;
const express = require("express");
const app = express();
const cors = require("cors");
const authRouter = require("./routes/auth");
var cookieParser = require('cookie-parser')



connect_db();

app.use(express.json());
app.use(cookieParser())
app.use(cors());
app.use("/" , authRouter);



app.listen(port , () => {
    console.log("Server is running!!");
})

Code for setting up the cookie from express api only controller


const User = require("../models/user");
const jwt = require("jsonwebtoken");
const bcrypt = require('bcrypt')


const login = async (req, res) => {
    const { email, password } = req.body;
    try {
        const checkDetails = await User.findOne({ email });
        if (checkDetails) {
            const { password: hashedPassword, token, username } = checkDetails;
            bcrypt.compare(password, hashedPassword, function (err, matched) {
                if (matched) {
                    res.cookie("token", token, { expires: new Date(Date.now()   (5 * 60000)) , httpOnly: true }).json({ "message": "You logged in sucessfully!" });
                } else {
                    res.status(500).json({ "message": "Wrong password" });
                }
            });
        } else {
            res.status(500).json({ "message": "Wrong email" });
        }
    } catch (error) {
        console.log(error.message);
    }
}

Here is the react.js code that I am using to fetch data from api without using a proxy in package.json file

    if (errors.length === 0) {

      const isLogin = await fetch("http://localhost:5000/api/login", {
        method: "POST",
        body: JSON.stringify({ email, password }),
        headers: {
          "Content-Type": "application/json"
        }
      });
      const res = await isLogin.json();
      if(res) alert(res.message);
    }

I want to get to know what is the reason behind this "getting cookie in postman but not in the browser". Do I need to use any react package?

The network tab screenshot might help you. If I see in the network tab I get the same cookie, set among the other headers

CodePudding user response：

To my understanding, fetch doesn't send requests with the cookies your browser has stored for that domain, and similarly, it doesn't store any cookies it receives in the response. This seems to be the expected behaviour of fetch.

To override this, try setting the credentials option when making the request, like so:

fetch(url, {  
  // ...
  credentials: 'include'  
})

or, alternatively:

fetch(url, {  
  // ...
  credentials: 'same-origin'  
})

You can read more about the differences between the two here.

CodePudding user response：

I got my error resolved with two changings in my code

In front end just added credentials: 'include'

      fetch(url, {  
         method : "POST"
         body : body,
         headers : headers,
         credentials: 'include'  
      })

And in back end just replaced app.use(cors()); to

app.use(cors({ origin: 'http://localhost:3000', credentials: true, exposedHeaders: ['Set-Cookie', 'Date', 'ETag'] }))

That's it got resolved, Now I have cookies stored in my browser!!! Great. Thanks to this article:

https://www.anycodings.com/2022/01/react-app-express-server-set-cookie-not.html