cookie is null when using reactjs as frontend and nodejs as backend - node.js

Question

ReactJS code
import axios from 'axios';
import {useEffect,useState} from 'react';
import ReactDOM from "react-dom/client";
import React from "react";
const App = () => {
const [res,setRes] = useState(null)
useEffect(() => {
document.cookie='hello=3';
axios.post('http://localhost:4000/hello').then(res1 => {
setRes(res1.data)
})
},[])
return (
<div>
{res}
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
Nodejs code
import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser'
import cookieParser from 'cookie-parser'
const PORT = 4000;
const app = express();
// cors
app.use(cors());
app.use(bodyParser.urlencoded({extended: false}));
app.use(cookieParser())
app.post('/hello', (req, res) => {
console.log(req.cookies)
res.send('This is from server!')
})
app.listen(PORT, () => {
console.log('listening on port', PORT); // eslint-disable-line no-console
});
On the line of console.log(req.cookies) in node.js it gives
[Object: null prototype] {}
what is the issue?

Answer 1

You are sending request to a different domain. If you want to send cookies with that request you would have to add withCredentials property in request options.
axios.get(
'http://localhost:4000/hello',
{ withCredentials: true }
);