CODEWITHSUNDEEP
axiosfetchcross-domainreact-cookie
Ashish Bhattarai
Ashish Bhattarai

Reputation: 150

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: "[email protected]", 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: "[email protected]" } })
         .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..

Upvotes: 0

Views: 2206

Answers (2)

Lahiru Lanka Rathnayaka
Lahiru Lanka Rathnayaka

Reputation: 883

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

Upvotes: 0

Ashish Bhattarai
Ashish Bhattarai

Reputation: 150

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

Upvotes: 2

Related Questions