Cookies missing in Chrome dev tools application tab but visible under network section

Question

I am trying to set a cookie on button click using React (Frontend) and Node+Express as a backend. I can see the cookie in the response header under the network tab but the same cookie is not set under the application tab. I tried everything mentioned in the other post but was not able to find the solution.

Server Side index.js:

const expreess=require('express')
const cors=require('cors')
const { default: mongoose } = require('mongoose')
const app =expreess()
const user_routes=require("./routes/user_routes")
const login_routes=require("./routes/login_routes")
const feedback_routes=require("./routes/feedback_routes")
const cookieParser=require('cookie-parser')
const {requireAuth} =require("./middleware/middleware")

app.use(cookieParser())
app.use(cors({ origin: 'http://localhost:5173', credentials: true, exposedHeaders: ['Set-Cookie', 'Date', 'ETag'] }))
app.use(expreess.json())
app.use(function(req, res, next) {
    res.header('Content-Type', 'application/json;charset=UTF-8')
    res.header('Access-Control-Allow-Credentials', true)
    res.header(
      'Access-Control-Allow-Headers',
      'Origin, X-Requested-With, Content-Type, Accept'
    )
    next()
  })
app.use("/users",user_routes)
app.use("/login",login_routes)
app.use("/feedback",feedback_routes)


mongoose.connect("mongodb+srv://testuser:[email protected]/feedback-data")
    .then(()=>{app.listen(5000,()=>console.log("MongoDB connection Successfull & Server started on port 5000...."))})
    .catch((error)=>console.log("Server start failed ",error))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

feedback route:

const express=require('express')
const router=express.Router()

router.get("/",(req,res)=>{
    res.cookie("jwt","Login Data",{httpOnly:false})
    res.json({data:"Fetched Data from Server"})
})

router.post("/",(req,res)=>{
    res.cookie("jwt","SampleData",{httpOnly:false})
    res.send("Feedback Router post")
})

module.exports=router

Client Side:

import axios from "axios"


const Feedback = () => {
  const handleClick=()=>{
    axios.post("http://localhost:5000/feedback",{withCredentials: true})
    .then((res)=>console.log(res))
    .catch((error)=>console.log(error))
  }

  const handleClickGet=()=>{
    axios.get("http://localhost:5000/feedback",{withCredentials: true})
    .then((res)=>console.log(res))
    .catch((error)=>console.log(error))
  }

  return (
    <div>
      <h1>Feedback</h1>
      <button onClick={handleClick}>Post Cookie</button>
      <button onClick={handleClickGet}>Get Cookie</button>
      
    </div>
  )
}

export default Feedback

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Network Tab:

Application Tab:

I tried all the related posts and expected to see cookies under the application tab instead of the network tab. I want to use this cookie and create a login system with jwt token.

Answer 1

I had the same problem with React(vite). Don't access your front-end with http://127.0.0.1:5173/. Instead access it with http://localhost:5173/. Even though both are the same the web page is loaded from http://localhost:5173/ and it makes a GET request to http://127.0.0.1:5173/. So this is a cross-origin request and by default browsers will not send credentials (such as Cookies and HTTP authentication).

See more on a previous question: Can't get the cookie data from Go server with React

Answer 2

You can send the cookie with this format.

res.cookie("cookie_value", "cookie_here", {
        sameSite: "lax",
        httpOnly: false,
        secure: false,
        maxAge: 60 * 60 * 24 * 7,
      })
      .status(200)
      .json({ success: true });

Answer 3

just an add on to the answer by @PTsag, you can proxy your api request like this in your package.json and it will work.

"proxy": "http://localhost:5000",