Axios not receiving cookies in Heroku deployed MERN application

Question

I have a Node/Express server deployed on Heroku that I am using to send httpOnly cookies to store JWTs. I have been using Axios to set the cookies while hosting my React app on port 3000 and the Express server on port 5000.

Axios Config in React App

const myAxios = axios.create({
  withCredentials: true,
  baseURL: "http://localhost:5000/",
});

index.js of Express App

app.use(cors({ origin: true, credentials: true }));

This has been working fine until I deployed my app to Heroku and switched my Axios config to use baseURL:http://app-name.herokuapp.com . I am now no longer receiving cookies (for both GET and POST requests). I still get the cookies if I visit http://app-name.herokuapp.com/get-cookie-endpoint directly in Chrome or in Postman. However, when I try calling myAxios.get('/get-cookie-endpoint) from my React app on localhost:3000, I no longer receive the cookie. I inspected the XHR request and I am still getting a Set-Cookie response header.

Any ideas? I have experimented with many different Axios and CORS settings but nothing seems to work.

Answer 1

Try adding sameSite = 'none'; in cookie object. I was having this issue and it worked for me.