I'm trying to test HTTPS on both my frontend and backend environments locally.On the UI, I'm using Nextjs and am able to easily add HTTPS to my environment using the --experimental-https parameter when running the frontend server.I can see that it is working properly because I navigate to https://localhost:3001 and am able to view my UI.
On the backend, I am using Nodejs and Express. In my server.js file, I use the https package and have the following code:
const sslOptions = { key: fs.readFileSync('C:/Windows/System32/certs/cert.key'), cert: fs.readFileSync('C:/Windows/System32/certs/cert.crt'), ca: fs.readFileSync('C:/Windows/System32/certs/ca.crt')};// Create HTTPS serverhttps.createServer(sslOptions, app).listen(port, () => { console.log(`App running on port ${port} with SSL.`);});In Postman, when I do this I am able to successfully hit my APIs on https://localhost:3000
I have the following snippet in one of my components on the UI:
const response = await fetch('https://localhost:3000/users/register', { method: 'POST', headers: {'Content-Type': 'application/json', }, body: JSON.stringify(user), }); if (response.ok) { console.log('User registered successfully'); } else { console.error('Failed to register user'); } };When I press the register button, I get the following errors in my console logs:
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 tried tinkering with the ports and using local-ssl-proxy instead for the backend but have run out of ideas on why this handshake is failing.I'm thinking it might be because I'm not setting the certs on the UI like I am for the backend.