I am doing a react + node project with google sign in.
Have already configured cors with
{
origin: 'http://localhost:3000',
credentials: true
}
and using fetch with
credentials: 'include'
also I am using cookie parser middleware
and I am setting a cookie which is being sent with response header but chrome is not setting the cookie while firefox does save it.
I have seen other answers indicating that its the bug in chromium where it does not set cookies set by
localhost but a cookie named "G_AUTHUSER_H" is set with domain "localhost".
The cookie was once set but I deleted it to test again. But now chrome does not set the cookie.
Related
I'm setting 2 cookies in response from backend to the browser.
One that is secure HTTPOnly (it's refreshToken) and the other one without those parameters so it's accessible to JavaScript (carrying information about refreshToken is set and when it expires).
Cookies in response:
Neither of those two is set in browser. I studied all about cookies and I'll be honest, I'm lost here and need your help.
At first it was working very well on my localhost environment (backend on localhost:8080, frontend on localhost:3000).
Then I made deploy and there it was NOT working.
I tested again on localhost and I checked "Disable cache" to prevent unwanted behaviour and it is not working even there.
I'll mention that I'm using CORS, not sure if that can may interfere:
I tested this both in Chrome and Firefox.
I FINALY figured it out. Cookies are valid. The answer is to set withCredentials = true both in frontend and backend.
First I thought the parameter withCredentials on frontend is used only when we want to send our credentials hidden in secure HttpOnly cookies to which we don't have access to but browser does.
Apparently it is also used when we want to set cookies from response. Link to docs.
responses from a different domain cannot set cookie values for their own domain unless withCredentials is set to true before making the request
Secondly, we also have to add withCredentials on backend to CorsFilter (in Spring boot) otherwise we get CORS error.
CorsConfiguration()
.apply {
allowedOrigins = listOf(uiUrl)
allowedHeaders = listOf("*")
allowedMethods = listOf("*")
allowCredentials = true
}
I have a Vue.js project deployed on firebase and a node-express app deployed on Heroku. Now I want to send cookies along with each request to the server using Axios. I am using Axios and cookies are being set using vue-cookies (which are of sameSite: none and secure: true attributes).
In localhost, I can see the cookies in each request in my backend and can access them using req.cookies.session. (The session is my cookie name that is saved on the client-side.)
But in production, I can't see the cookies in the request. What am I doing wrong?
node-express cors
app.use(cors({
credentials: true,
origin: 'https://paid-kickstartu-webapp.web.app',
'Access-Control-Allow-Origin': '*',
}));
Also attaching my screenshots of both Axios configuration and node-express backend for more understanding. Everything is working but cookies are not being sent in the backend from the frontend. In localhost both work as required.
Try this
If you are using Firebase Hosting + Cloud Functions, __session is the only cookie you can store, by design. This is necessary for us to be able to efficiently cache content on the CDN -- we strip all cookies from the request other than __session. This should be documented but doesn't appear to be (oops!). We'll update documentation to reflect this limitation.
Also, you need to set Cache-Control Header as private
res.setHeader('Cache-Control', 'private');
Thank you all for helping. I have solved this problem, what I was doing before was getting the cookie in res body and saving the cookie on the client-side using vue-cookie, So any call to the backend was showing me empty cookies. But now I am setting the cookie header from my backend (node-express) during login and now when I send any further request's I can see the previous cookies that were set in my headers during login.
I have a ReactJS frontend and a NodeJS backend. The frontend calls the login API from NodeJS it returns a cookie with the JWT token which will be used for other calls. I've tested it and it works when both the frontend and backend are running on localhost.
I've used postman and called the same API. One running on localhost and one running on AWS EC2. Both returns the same response, however, the one running on EC2 doesn't set the cookie. set-cookie header is present on both.
I've included the cors configuration.
var corsOptions = {
origin: ['http://localhost:3001'],
credentials: true
}
app.use(cors(corsOptions));
FOUND THE PROBLEM:
Turns out safari was blocking the cookies. Chrome on iOS is affected by it too. Turning off the option "Prevent cross-site tracking" on safari preferences solved the issue
try to use the full link to send a request to API
axios.post('https://mysite/api/v1/login', {email,password,...})
I have been able to find countless topics of discussion on this, but none of the solutions seem to work for me
Essentially, I have a react client that uses axios to make requests to a node js backend which uses express session
I’m able to log into the application and get a successful response. However, the response header does not include the connect.sid field. And when checking chromes devtools -> application -> cookies folder, I don’t see any cookies there for the site
I also tried testing this using IE and Firefox with the same result
Now when making the same login request via postman, I’m able to see both the connect.sid in the header and the cookie itself in the cookies tab.
In my current situation, the client and server are both running on localhost, with the client running on port 3000 and the server running on port 3001. One difference is that client is http and server is https
From my research online, these are the common things suggested, with neither working in my case
Setting axios withCredential to “true” in react. This appears to have fixed the problem for majority of the people online. I have mine set up as well
import axios from "axios";
axios.defaults.withCredentials = true;
Setting the httpOnly field to false for the session cookie in the server. Below is my session configuration
app.use(session({
secret: 'BSL3562904BVAIHBP53VRFSF',
resave: false,
saveUninitialized: false,
rolling: true,
cookie: {secure: true, httpOnly: false }
}))
Configuring the cors settings in the server. This shouldn’t affect me in this scenario as the client and server are running on the same domain, but I still covered that base anyway
app.use(cors({
credentials: true,
origin: "http://localhost:3000"
}));
For the origin value I tried both “localhost” and “127.0.0.1”
Setting “trust proxy” in server
app.set('trust proxy', 1);// trust first proxy
This isn’t simply an issue of not being able to retrieve cookies in the client, as I can create and attach cookies to the response and see them. It’s just the session cookie that does not appear
At this point, I’m kind of banging my head against a wall. So any help or suggestions would be much appreciated!
I am trying to set/get cookies for users that browse on my web server, I found the following StackOverflow question: Get and Set a Single Cookie with Node.js HTTP Server and I was able to get the cookie set on the browser just fine. When I go to the cookie viewer I see the cookie I set just as I want it. The problem comes when I try to view the cookies, the request.headers.cookie is always undefined. How would I go about getting the cookies on a users browser, preferably without NPM modules and purely node and its own modules?
How I'm setting the cookie (this works fine, I am able to see this cookie in the browser when I go to view my cookies):
response.writeHead(statusCode, {
'Set-Cookie': cookie
})
// statusCode = 200
// cookie = 'token=SOME_TOKEN'
// In the browser I see the exact cookie I set
How I'm trying to get the cookie (not working always undefined):
let cookies = request.headers.cookie
// This returns undefined always
// even when I can view the cookie in the
// browser the request is coming from
// Also quick note: I'm currently not
// parsing the cookies out to view them as
// a JSON object because I can not get any
// of the cookies
EDIT:
It seems I have finally found the error, it sets the cookie path to be whatever path I set the cookie on, so I was setting the cookie on the "/auth" route. How can I make it so that this cookie is accessible from any route the user goes to?
Ok I finally found the solution, my error was that it was auto-setting the path of the cookie to be "/auth" so I could only access the cookie if the url requested contained "/auth", where I set the cookie I changed it to the following:
response.writeHead(statusCode, {
'Set-Cookie': cookie + '; Path=/'
})
And now I can access my cookie