Cookies not sent with cross-origin-request

Question

After days of searching and trying, I'm here now.

I deployed the React Application in Netlify and the Node.js backend in Heroku. Everything works fine in localhost environment. But after deploying, cookies are not sent in request header.

CORS:(Backend Node.js)

app.use(cors({
  origin: CORS_ORIGIN,
  credentials: true,
  allowedHeaders: "Content-Type,Accept,User-Agent,Accept-Language,Access-Control-Allow-Origin,Access-Control-Allow-Credentials,cache-control"
}));

Axios:

import axios from "axios";
axios.defaults.withCredentials = true;
export default axios.create({
   baseURL: process.env.REACT_APP_BACKEND + "/api",
   headers: {
      "Content-type": "application/json",
      "Access-Control-Allow-Origin": process.env.REACT_APP_BACKEND,
   },
});

Fetching Data(Mutation): apiClient is imported from above Axios.js and cookies is handled by react-cookies

apiClient.post("/auth/login",{ email: "name@mail.com", password: "pawspaws" })
    .then((res) => {
            setCookie("jwt", res.data.accessToken, { path: process.env.REACT_APP_PATH || "/", domain: process.env.REACT_APP_DOMAIN, maxAge: 26000, secure: true, sameSite: 'None' });
            setCookie("refresh", res.data.refreshToken, { path: process.env.REACT_APP_PATH || "/", domain: process.env.REACT_APP_DOMAIN, maxAge: 2600000, secure: true, sameSite: 'None' });
            setCookie("user", res.data.user, { path: process.env.REACT_APP_PATH || "/", domain: process.env.REACT_APP_DOMAIN, maxAge: 26000, secure: true, sameSite: 'None' });
         }).catch((err) => console.log(err.response))

Above code sets the cookies.. and it's working.

Now, below is the request I'm sending which doesn't send the Cookies along with the request:

apiClient.get("/posts/timeline", { params: { email: "name@mail.com" } })
         .then((res) => { console.log(res.data); })
         .catch((err) => { console.log(err.response) });

Well, it returns unauthorized since the Cookie is not sent at all..

score 2 · Accepted Answer · answered Feb 11 '22 at 06:50

Ok, i found my own solution.. It was pretty easy.. It was setting up proxy

Just added line below to package.json in frontend:

"proxy":"https://random.name.herokuapp.com",

FYI, for Netlify, we need additional _redirects file in public folder.

_redirects

/api/* https://random.name.herokuapp.com/api/:splat 200
/*     /index.html                                  200

score 0 · Answer 2 · answered Jun 17 '22 at 18:57

In my case I had hardcoded my front end api calls to the herokubackend

axios.get("https://infinite-ocean-8435679.herokuapp.com/api/user")

First removed the hrokupart from the request like this

axios.get("/api/loguserin")

Then added the proxy value to the bottom of the package.json

"proxy":"https://infinite-ocean-8435679.herokuapp.com",

Next added a file called _redirects inside the react public folder.(_redirects is the file name and it has no extension such as .txt so don't add _redirects.txt )

Add the following inside _redirects file

/api/* https://infinite-ocean-8435679.herokuapp.com/api/:splat 200
/*     /index.html                                  200

inside _redirects file formatting will be weird just add above code replacing heroku part with your backend url. React automatically add all the files inside the public folder to its build folder once created.

deploy the site to Netlify

I did everything as you said but the redirects is somehow not working as the request URL is not changing to the heroku backend but stays like the frontend URL `https://randomapp.netlify.app/api/users/sign-in` — hanku8, Nov 30 '22 at 21:50

Cookies not sent with cross-origin-request

2 Answers2

Linked