I’m facing difficulties in configuring my local setup with SSL. My frontend is developed using Next.js and runs on port 3002 with the experimental HTTPS feature active. Meanwhile, my backend is set up with Express on port 8080.
Here’s how I set up SSL for the backend:
const httpsConfig = {
key: fs.readFileSync('./ssl/private.key'),
cert: fs.readFileSync('./ssl/certificate.crt'),
ca: fs.readFileSync('./ssl/authority.crt')
};
https.createServer(httpsConfig, server).listen(serverPort, () => {
console.log(`Server running securely on port ${serverPort}`);
});
In my frontend, I attempt to make an API call like this:
const apiResponse = await fetch('https://localhost:8080/api/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(userData),
});
if (apiResponse.ok) {
console.log('Signup successful');
} else {
console.error('Signup failed');
}
While I can access my backend endpoints via Postman without any issues, the frontend’s requests are resulting in CORS errors indicating that the requests are failing.
For handling CORS on the backend, I’ve configured it as follows:
const corsConfig = {
origin: 'https://localhost:3002',
optionsSuccessStatus: 200,
};
server.use(cors(corsConfig));
Both components function properly on their own, yet they’re unable to interact with each other. Can anyone help me figure out what’s wrong?