How we set cookie in browser from response header in react

Question

 export const signIn = (user)=>{
    return fetch(`${API}/signin`, {
        method: "POST",
        headers:{
            Accept:"application/json",
            "Content-Type":"application/json"
        },
        body: JSON.stringify(user)
    })
    .then((res)=>{return res.json()})
    .catch(err=>console.log(err))
}



export const authenticate = (data, next)=>{
    if(typeof window !== "undefined"){
        localStorage.setItem("jwt" , JSON.stringify(data))
        next();
    }
}

IN BACKEND

const user = await User.findOne({email:email})
    if(!user) return res.status(400).json({error:"please enter a correct cradentials"})
    if(!user.autheticate(password)) return res.status(400).json({error:"please enter a correct cradentials"})
    const token = jwt.sign({ _id: user._id }, process.env.SECRET);
    //put token in cookie
    res.cookie("token", token, { expire: new Date() + 9999 });
    const { _id, name, email1, role } = user;
    //send response to front end
    return res.json({ 
      token, 
      user: { _id, name, email:email1, role } 
    })

In Response HEADER WE RECEIVE COOKIE BUT NOT SET IN BROWSER

This is the response header:

This image cookie is not set after login:

score 0 · Answer 1 · answered Oct 11 '22 at 03:37

You're using different server and client-side applications, you need to enable Cross Origin Resource Sharing (CORS) in order to allow exchange of cookies between both the entities.

Here's a solution to implement without any library: Set cookies for cross origin requests

Here's one if you're using express, you can just install cors: How to pass cookies through CORS?

How we set cookie in browser from response header in react

1 Answers1