Authentication Tokens Not Transmitted in CORS Environment with Amazon Load Balancer and Containerized API

Backend
1

I’m having trouble with my web app. The browser won’t send auth cookies to my backend when it’s running on a different domain. Here’s what’s going on:

My frontend is on http://localhost:3000 for testing and https://frontend.mydomain.com when it’s live. The backend is in a Docker container on AWS, behind a load balancer. It’s supposed to get HTTPS requests at https://knowyourfashion.in/hello.

The weird part is, the cookies show up in the browser, but they don’t get sent with API calls. This happens both locally and on the live site. I’ve double-checked that Axios is set up right with withCredentials: true.

I’ve tried:

  • Making sure the cookies are set correctly
  • Checking that the load balancer routes stuff properly
  • Testing with Postman (which works fine)

But I’m stuck. Any ideas on what could be blocking the cookies? Do I need to tweak something in my setup? How can I figure out if it’s the load balancer, the browser, or my code that’s causing this?

Here’s a basic version of my backend code:

import express from 'express';
import cors from 'cors';

const app = express();

app.use(cors({
  origin: ['http://localhost:3000', 'https://frontend.mydomain.com'],
  credentials: true,
}));

app.get('/greet', (req, res) => {
  res.send('Hi there!');
});

app.listen(4000, () => console.log('Server running'));

Any help would be awesome. Thanks!

2

hmm, interesting problem! have u tried tweaking the SameSite cookie settings? sometimes they can be sneaky troublemakers. also, maybe check if ur load balancer is stripping any important headers? browser dev tools could give u some juicy clues about whats actually being sent. oh, and double-check that ur API is sending the right CORS headers too. good luck figuring it out!

3

Have you considered the possibility of SameSite cookie restrictions? Modern browsers enforce strict rules for cross-site cookie transmission. Try explicitly setting your cookies with ‘SameSite=None; Secure’ attributes. This allows them to be sent in cross-origin requests when using HTTPS.

Also, double-check your AWS Application Load Balancer settings. Ensure it’s configured to forward all headers, including cookies. Sometimes, the ALB can inadvertently strip important headers if not set up correctly.

Lastly, verify that your API’s CORS configuration includes ‘Access-Control-Allow-Credentials: true’ in its response headers. This explicit permission is crucial for the browser to include credentials in cross-origin requests.

If these don’t resolve the issue, consider using browser developer tools to inspect the exact headers being sent and received. This can provide valuable insights into where the authentication process is breaking down.

4

hey there, sounds like a tricky situation! have u checked ur load balancer settings? sometimes they can mess with headers n cookies. also, doublecheck ur SameSite cookie settings - they might be blocking cross-domain stuff. browser dev tools can help u see whats actually being sent. good luck!