CORS origin problems while setting origin to '*' with cookies

Question

I am developping a reactjs front end app with a nodejs/express backend. Before, react side, I was accessing my nodejs through the address localhost:5000 but since I want to try it from my mobile device, I naively changed localhost to my @ip 192.168.X.X and as the title says, it does not work.

I am sharing an example of what I tried with the login feature since the server is supposed to send back a cookie.

Front end I use axios :

const result = await axios({
                method:'post',
                url:'http://192.168.X.X:5000/api/user/login',
                data:{
                    "emailLogin":login,
                    "password":password
                },
                withCredentials:true,
                headers: { crossDomain: true, 'Content-Type': 'application/json' },
            });

Backend I tried this :

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

This first configuration send me back a 200 http code but without any cookie.

I also tried this as backend :

const corsConfig = {
    credentials:true,
    origin:"*",
}
app.use(cors(corsConfig));

and this time, frontend side, I get the well known Access to XMLHttpRequest error.

I have read somewhere on stackoverflow that when origin is set to '*' credential is supposed to be set to false.

Also I would love to have a complete documentation about cors, react and nodejs but to be honest I couldn't find any that fix my problem.

To sum my problem up :

My reactjs frontend that will deployed on several devices with unknown addresses is supposed to send a POST request to a nodejs backend that will send back a cookie.

Sorry I deleted my answer after realizing that I had missed the middle part of your question, and you had already tried pretty much what I was suggesting. Could this be the docs you are looking for https://www.npmjs.com/package/cors? — Alex028502, Nov 29 '21 at 23:16
I suggest you try it once by hard coding your current client address into the server cors code as suggested here https://stackoverflow.com/questions/19743396/cors-cannot-use-wildcard-in-access-control-allow-origin-when-credentials-flag-i/19744754 and after you know that works, figure out what to do next — Alex028502, Nov 29 '21 at 23:17
May I know your frontend and backend domain/ip. Enabling CORS with cookies depends on these two. If both frontend and backend on different domain like client.com and server.com you should change cookie attribute for sameSite='None' and with HTTPS for your website. — Aghilan B, Nov 30 '21 at 11:02
Actually, I think I have over-complicated my problem through this question. My server is based on nodejs and my client app is a reactjs app. Let's say my server will be hosted on myserver.com and my client on myclient.com. The users are reaching my app with myclient.com and from it they communicate to myserver.com. Maybe I misunderstood the CORS address configuration, is CORS server side supposed to allow data from myclient.com or the actual user address ? With the first example above, I can access my server but can't get any cookie, and the second example, I just can't reach the server. — Maxime D., Nov 30 '21 at 15:35

score 0 · Accepted Answer · edited Dec 01 '21 at 12:58

I went with the same issue. When my backend is myserver.com and frontend is myclient.com

BackEnd Configuration:

enbling CORS with exact origin instead of "*"

app.use(cors({
 origin: [
   'http://localhost:4200',
   'https://dev.myclient.com',
   'https://staging.myclient.com',
   'https://www.myclient.com',
 ],
 credentials: true
}))

Setting Cookie with SameSite="None" and Backend Enabled with HTTPS.

res.cookie('access_token', token, {
 expires: new Date(Date.now() + (3600 * 1000 * 24 * 180 * 1)), //second min hour days year
 secure: true, // set to true - samesite none only works with https
 httpOnly: true, // backend only
 sameSite: 'none'
});

As your frontend and backend is on different domain. You must specify sameSite attribute to 'none'

Your backend must enabled with HTTPS as samSite='none' only works with HTTPS or else your cookie will be blocked by browser. Check samesite attribute in cookie link.

Enable SSL certificate for your backend myserver.com

Indeed, my problem was the origin, I misunderstood exactly why but by adding the different addresses I could reach my client just as you did, I finally could make my app works on all my devices. A great thank Aghilan ! I will take a look at samesite attribute now. — Maxime D., Dec 01 '21 at 08:07

CORS origin problems while setting origin to '*' with cookies

1 Answers1