No Cookies in Headers using Axios withCredentials: true - reactjs

Question

I am using ReactJS and ExpressJS with jwt authenticate. In my server, I have config for cors like this
const corsOptions = {
//To allow requests from client
origin: true,
credentials: true,
methods: ['GET', 'PUT', 'POST', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization', 'Set-Cookie'],
};
In my client, I send request to the Server like this
export function createNewRequest(data, callback) {
axios.post(`${process.env.REACT_APP_API}/api/requests`, data,
{
withCredentials: true
}).then(res => {
callback(res.data);
})
.catch(err => {
if (err.response) {
if (err.response.status === 403 || err.response.status === 401) {
getToken(createNewRequest(data, callback));
} else {
callback(err.response.data);
}
}
})
}
In my local environment, I test and every thing run fine. But when i deploy my server, then i try to send request from my local client to the server. The server doesn't receive cookies in headers.
I have tried setting origins like this
const corsOptions = {
//To allow requests from client
origin: ['http://localhost:3000'],
credentials: true,
methods: ['GET', 'PUT', 'POST', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization', 'Set-Cookie'],
};
And tried to set default withCredentials
axios.defaults.withCredentials = true;
But none of these work. Can anyone explain to me what i did wrong and help me solve this

Answer 1

Try to allow app.use(cors()); like this without option(to allow everything).
example of code:
app.use(cors());
app.use(bodyParser.json({ origin: "https://famegoal.com/" }));
app.use("/function", couponRoutes);
mongoose
.connect(
`mongodb+srv://${process.env.DB_USER}:${process.env.DB_PASSWORD}#cluster0.qvs4c.mongodb.net/${process.env.DB_NAME}?retryWrites=true&w=majority`
)
.then(() => {
app.set("port", process.env.PORT || 5000);
app.listen(app.get("port"), function () {
console.log("Node app is running on port", app.get("port"));
});
})
.catch((err) => {
console.log(err);
});
That's not safe, but it's a great solution.

Answer 2

set the following middleware in your app.js as follows
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()
});
and in reactjs use withCredentials: true