axiosfetchcross-domainreact-cookie

Cookies not sent with cross-origin-request


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) });

Cookies in FireFox enter image description here Well, it returns unauthorized since the Cookie is not sent at all..


Solution

  • 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