"Frontend Not Connecting to Backend After Switching from HTTP to HTTPS in Vite and Express (MERN Stack)"

I'm working on a CRUD project using the MERN stack. Initially, everything worked perfectly when I was running the project on HTTP. However, when I switched to HTTPS, my frontend (built with Vite) stopped connecting to the backend (Express with MongoDB). I can't seem to figure out why the frontend requests aren't reaching the backend anymore.

Here are the details:

Frontend is built using Vite and React.Backend uses Express, and I’ve set it up to serve via HTTPS.Frontend hits a localhost URL (https://localhost:3001) to make API calls.I’m using vite-plugin-mkcert to set up HTTPS on the frontend side.The backend is running HTTPS with a self-signed certificate using https.createServer.Despite both the frontend and backend running on HTTPS, the frontend isn't able to reach the backend. It was working fine when everything was running on HTTP.

Here’s my code:

**Frontend Code (Vite Configuration & React Components):**vite.config.js:

import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'import mkcert from 'vite-plugin-mkcert'export default defineConfig({  plugins: [react(), mkcert()],  server: {    port: 3000,    https: true  }})

App.jsx:

import { BrowserRouter, Routes, Route } from 'react-router-dom';import Users from './Components/Users';import CreateUser from './Components/CreateUser';import UpdateUser from './Components/UpdateUser';function App() {  return (<BrowserRouter><Routes><Route path="/" element={<Users />} /><Route path="/create" element={<CreateUser />} /><Route path="/update/:id" element={<UpdateUser />} /></Routes></BrowserRouter>  );}export default App;

Users.jsx (Sample API call):

import axios from 'axios';import React, { useEffect, useState } from 'react';const Users = () => {  const [users, setUsers] = useState([]);  useEffect(() => {    axios.get('https://localhost:3001/')      .then(result => setUsers(result.data))      .catch(err => console.log(err));  }, []);  return (<div>      {/* Rendering user data */}</div>  );}export default Users;

**Backend Code (Express & HTTPS):

index.js:**

const express = require('express');const mongoose = require('mongoose');const fs = require('fs');const https = require('https');const cors = require('cors');const path = require('path');const UserModel = require('./models/Users');const app = express();app.use(cors({  origin: 'https://localhost:3000', // Frontend URL}));app.use(express.json());mongoose.connect('mongodb://127.0.0.1:27017/crud');app.post('/createUser', (req, res) => {  UserModel.create(req.body)    .then(users => res.json(users))    .catch(err => res.json(err));});app.get('/', (req, res) => {  UserModel.find({})    .then(users => res.json(users))    .catch(err => res.json(err));});const httpsOption = {  cert: fs.readFileSync(path.join(__dirname, 'ssl', 'server.crt')),  key: fs.readFileSync(path.join(__dirname, 'ssl', 'server.key')),};// Create HTTPS serverhttps.createServer(httpsOption, app).listen(3001, () => {  console.log('Server is running on https://localhost:3001');});

Problem:

After switching to HTTPS:

Frontend requests aren't reaching the backend.The browser console doesn’t show any CORS issues, but the API calls fail.Everything was working perfectly when both the frontend and backend were using HTTP.What am I missing here? How can I resolve this issue with the frontend not hitting the backend when both are on HTTPS?

Any help or advice would be appreciated!

Additional Info:Node.js version: 20.17.0