MERN Stack: Was Not Allowed to Display Insecure Content

Question

 useEffect(() => {
   async function getRecords() {
     const response = await fetch(`http://localhost:5000/record/`);
 
     if (!response.ok) {
       const message = `An error occurred: ${response.statusText}`;
       window.alert(message);
       return;
     }
 
     const records = await response.json();
     setRecords(records);
   }

Yep, Safari does not want to display mixed content... I tried to connect the client-side React application to server-side ExpressJS & NodeJS application using MongoDB's own tutorial on their website... however I encountered this error on Javascript Console after I deployed the app on Heroku! The form retrieved from the MongoDB database does not properly show up on the website unlike its intended behaviour.

I believe that the problem can be resolved by somehow changing the URL that contains localhost to something other than that; I also tried to set the proxy address on root folder's package.JSON to http://localhost:5000 but it did not make a single change whatsoever.

Please help my fellow StackOverFlow members! Any help would be greatly appreciated!

EDIT: YOU CAN ALSO CHECK OUT THE ACTUAL WEBSITE FOR THE SAKE OF JAVASCRIPT CONSOLE... LINK