SSL Certificate Issues Between React Frontend and Express Backend in Local Development

Frontend
1

I’m having trouble getting my local development setup to work with SSL certificates. My frontend is built with React and runs on port 3001, while my Node.js Express backend runs on port 3000.

Frontend Setup:
I can access my React app at https://localhost:3001 without issues when using SSL mode.

Backend Configuration:
My Express server uses custom SSL certificates:

const httpsOptions = {
  key: fs.readFileSync('./ssl/private.key'),
  cert: fs.readFileSync('./ssl/certificate.crt'),
  ca: fs.readFileSync('./ssl/ca-bundle.crt')
};

https.createServer(httpsOptions, server).listen(serverPort, () => {
  console.log(`Server running on port ${serverPort} with SSL enabled.`);
});

API Call from Frontend:

const apiResponse = await fetch('https://localhost:3000/api/signup', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(userData),
});

if (apiResponse.ok) {
  console.log('Registration successful');
} else {
  console.error('Registration failed');
}

CORS Configuration:

const corsConfig = {
  origin: 'https://localhost:3001',
  optionsSuccessStatus: 200,
};
server.use(cors(corsConfig));

The API works fine in Postman, but when called from the frontend I get CORS errors and network failures. Could this be related to certificate trust issues between the two services?

2

This looks like a certificate validation issue, not CORS. When browsers hit localhost services over HTTPS, they’re super strict about certificate validation. Your custom certs probably aren’t trusted by the browser, so requests fail before CORS even gets involved. I’ve hit this same problem with local microservices. Fixed it by either adding my custom CA to the system trust store or just disabling cert validation for dev work. Try switching your backend to HTTP temporarily, or grab mkcert to generate locally-trusted certificates. You could also add certificate exception handling for your dev environment.

3

you might wanna check the cert chain and if the browser trusts it. self-signed certs can b tricky with local setups like yours, so just make sure they’re correctly set in the backend and the browser is allowing em.

4

Interesting setup! Any SSL errors showing up in the browser console when it hits your backend? Did you generate those certs yourself or get them from somewhere? Sometimes both services need the same cert authority for local dev to work right.