I have a Node/Express server deployed on Heroku that I am using to send httpOnly cookies to store JWTs. I have been using Axios to set the cookies while hosting my React app on port 3000 and the Express server on port 5000.
Axios Config in React App
const myAxios = axios.create({
withCredentials: true,
baseURL: "http://localhost:5000/",
});
index.js of Express App
app.use(cors({ origin: true, credentials: true }));
This has been working fine until I deployed my app to Heroku and switched my Axios config to use baseURL:http://app-name.herokuapp.com. I am now no longer receiving cookies (for both GET and POST requests). I still get the cookies if I visit http://app-name.herokuapp.com/get-cookie-endpoint directly in Chrome or in Postman. However, when I try calling myAxios.get('/get-cookie-endpoint) from my React app on localhost:3000, I no longer receive the cookie. I inspected the XHR request and I am still getting a Set-Cookie response header.
Any ideas? I have experimented with many different Axios and CORS settings but nothing seems to work.
Try adding sameSite = 'none'; in cookie object. I was having this issue and it worked for me.
Related
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 made an app including Vue.js client app and Node.js Express server app.
My client sents axios GET requests with cookies to the express server.
The problem is, the server deployed on Heroku doesn't get the cookies, although the local server works well.
It seems very weird because the server on Heroku actually gets the cookies when I test it with Postman.
const res = await axios.get(endpoint + '/api/user/auth', { withCredentials: true })
This is my client's axios request code.
const corsConfig = {
origin: true,
credentials: true
}
app.use(cors(corsConfig))
This is a part of the index.js file configuring CORS of the express server.
let auth = (req, res, next) => {
let token = req.cookies.x_auth
console.log(req.cookies)
console.log('token: ', token)
This is the part of a route getting cookies.
Local Vue.js client - Local express server => COOKIES
Local Vue.js client - Heroku express server => NO COOKIES
Deployed Vue.js client - Heroku express server => NO COOKIES
Postman request - Heroku express server => COOKIES
I don't even know whether it's a problem of the server or the client. All requests work just fine but getting cookies.
I am using react and node js. In nodejs I send cookie thourgh cors. It is totally fine in development. That mean both react and node are in localhost. I receive cookie from react.
when I deploy react to netlify, i don't receive cookie anymore (node is still in localhost).
I think it is not cors problem because i can still access to other things
app.use(cors({
origin: 'https://ecstatic-shannon-a729e4.netlify.app',
credentials: true,
allowedHeaders: ['Content-Type', 'x-auth-token'],
methods: "GET,HEAD,OPTIONS,PUT,PATCH,POST,DELETE"
}));
something wrong with my code or it is not allowd to send cookies from localhost to webservice?
I am working on a react app which receives httponly cookie from third party website.
I am able to see the cookie in Chrome developer console.
I am trying to send this cookie to backend of my app, built in expressjs, so that I can read the cookie. I am using fetch to send a GET request to the app while including the prop below:
Credentials: 'include'
In the express server, am allowing my front-end inside CORS and also
set credentials equal to true.
Issue:
In request header of my express server, I can't see the httponly cookie.
Can anyone guide me how can I send httponly and get it inside express server?
On client you must enable credentials as well. There is axios module to make requests with credentials. Example of usage:
import axios from 'axios'
const instance = axios.create({
withCredentials: true,
baseURL: API_SERVER
})
instance.get('todos')
In other way, you could provide cookie with XMLHttpRequest:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);
XMLHttpRequest
The first thing is allow our Express application to be able to receive requests from the host on which the Fetch API makes the calls in our situation it makes them from https://localhost:8080
const express = require('express');
const cors = require('cors');
app.use(cors({
origin: 'http://localhost:8080',
credentials: true
}));
The last thing is to create a fetch request via the Fetch API from [https://localhost:8080] to [http://localhost:9090/example]:
fetch('http://localhost:9090/example',{
method: ‘GET’,
credentials: 'include'
});
And now no matter that we made the request from another host ,we receive the cookies
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,...})