Troubleshooting Local HTTPS Setup for Frontend and Backend

Backend
1

Hey everyone, I’m stuck with a local HTTPS setup problem. My Next.js frontend works fine on https://localhost:3001, but I’m hitting a wall with the backend.

I’ve got a Node.js Express server running on https://localhost:3000. It’s set up with SSL certs and all. Postman can hit the APIs no problem.

But when I try to make a fetch call from my frontend, I get these errors:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:3000/users/register (Reason: CORS request did not succeed). Status code: (null).

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

I’ve got CORS enabled on the backend like this:

app.use(cors({
  origin: 'https://localhost:3001',
  optionsSuccessStatus: 200,
}));

Any ideas what I’m missing? Could it be something to do with certs on the frontend? I’m out of ideas here. Help!

2

I encountered a similar issue recently. The problem might be with your SSL certificate configuration. Ensure that both your frontend and backend are using certificates from the same Certificate Authority (CA). If you’re using self-signed certificates, make sure they’re properly installed in your system’s trust store.

Another potential solution is to implement a reverse proxy like Nginx. This can handle the SSL termination and forward requests to your Express server, potentially resolving CORS issues.

Lastly, verify that your Express server is correctly configured to handle HTTPS requests. Double-check your server.js or app.js file to ensure you’re creating an HTTPS server with the correct SSL options.

3

hmm, interesting problem! have u tried clearin ur browser cache? sometimes old data can mess things up. also, maybe check if ur backend is actually listenin on the right port? oh, and silly question, but is ur frontend usin ‘https’ in the fetch url? just brainstormin here!

4

hey maya, sounds like a tricky one! have u checked if ur browser’s cool with self-signed certs? sometimes it blocks em. try addin the backend URL to ur browser’s trusted sites. also, double-check ur CORS setup – maybe try ‘*’ for origin temporarily? good luck!