Cookies are being sent in the response header from server, but not getting set in any browser #5877
Comments
|
#5742 (comment) |
|
I checked but didn't help, its present in the set-cookie header in response but not in browser cookies |
|
I was facing the same issue. The cookie sent by the server was getting save with server domain(You can verify this hitting any of your server URL from browser search bar and openning dev tools) as a result when the api call was happening from browser in client domain cookie was not getting sent. Everything was working fine in localhost. The way I solved this was to put both server(render app) and client app(vercel) behind a reverse proxy server(render). Now since for browser the domain is same(proxy server domain) It started sending cookie. |
@s-decico Did you find a solution? |
|
Generally, if the cookies are being sent (as in, in the response, you have the set-cookie flag, which includes the correct cookies you want, say sessionid, csrftoken cookie), but the browser isn't storing them, it's usually an issue with additional flags that the browser needs. It needs the You also need to make sure the cookies you send (if cross origin, which in your case it is, since front and back are on different domains):
More info about this here. So your set-cookie header should look something like this: sessionid=z2s5v7c5wwrt1kpc7bs12n7qclmgbcav; expires=Sun, 14 Jan 2024 19:25:28 GMT; It works locally because it's treated as same origin cookies, which are considered safe (since the origin and host are the same). |
Section/Content To Improve
app.use((req, res, next) => {
const allowedOrigins = [
"https://app1.netlify.app",
"https://app2.vercel.app",
];
const origin = req.headers.origin;
if (allowedOrigins.includes(origin)) {
res.setHeader("Access-Control-Allow-Origin", origin);
}
res.setHeader("Access-Control-Allow-Credentials", true);
res.setHeader(
"Access-Control-Allow-Methods",
"GET, POST, PUT, DELETE, OPTIONS"
);
res.setHeader(
"Access-Control-Allow-Headers",
"X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept,Authorization"
);
// res.setHeader("Access-Control-Expose-Headers", "Set-Cookie");
if (req.method === "OPTIONS") {
res.sendStatus(200);
} else {
next();
}
});
I tried with withcreddentials:true in the front end also
axios
.post(url, UserData, {
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
withCredentials: true,
})
Suggested Improvement
I searched but didn't find why this is happening, 3rd party cookies are also enabled in browser, my client is hosted on .vercel.app and server on .onrender.com
Most importantly it was working locally(client at port 3000 and server at 3001)
Relevant File(s)
No response
The text was updated successfully, but these errors were encountered: