Setting cookies when developing on localhost

1

I’m working on a MERN test app to play around with user accounts/login/logout functionality. The backend is up and running (deployed to heroku), and when I test with Postman, everything works.

If someone registers or logs in, the server sets an httpOnly cookie for authorisation.

Problem is, I don’t know how to develop the frontend. I can make requests and register new users, but Chrome tells me that “a cookie’s SameSite attribute was not set or is invalid”.

On the server, I’ve set:

app.use(cors({
    origin: ['http://localhost:3000'],
    credentials: true,
    sameSite: 'none'
}));

On the client:

const config = {
    headers: { 'Content-Type': 'application/json' },
    withCredentials: true
};
const response = await axios.post(url, { email, password }, config);

I’m not even sure if the above config makes sense, it’s just stuff I’ve googled. I’ve tried to tell Chrome to always accept cookies from my backend. But now I’m running out of ideas. How do developers get around these things when testing?

2

What happens when you make the cookie secure?

1 Like
3

Then it works :smiley: Thanks! Didn’t realise I can let the server force-secure for http clients.

4

Glad it helped.

If you use create-react-app, you can even use https in development mode. I use this, because it simulates the real user experience better.

5

Good to know, makes sense. I had tried to lower Chome’s security settings to almost “allow everything” just to make it work, but obviously I want my app to work with reasonable settings, too.

I guess it’s normal that browser warns me and wants to protect me from malicious attacks coming from my own app, because it realises that it’s not really https?

6

Yes, the docs say:

Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page.

I’d recommend to deploy the frontend as early as possible, e.g. on Vercel or Netlify, so that you can see how a real user would see your app, with all the errors and warnings of the production build.

7

Frontend isn’t finished but yeah that’s going to be interesting, it’s my first full stack project where I can finally test and experiment with different CORS and browser settings in a real scenario.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.