API of timezone is not working after deployment

Question

I have created a timeZone application project to get the time of Asian Cities like (Baku,Kabul,Tokyo,Kolkata...) based on react framework and the app gets its data from worldtimeapi (example of Baku) and the project was completed successfully and it was running great on my localhost and after that i created a build folder and deployed at Netlify hosting platform but after deploying its not working only but the same API calls and codes are been running completely successfully at my local network , serve ... This is the deployed project : link

This is the code:

App.js

import './App.css';
import TimeZoneComponent from './Timezone';

function App() {
 return (
   <div >
    <h1 style={{textAlign:'center',fontSize:'50px'}}>Time Travel</h1>
    <TimeZoneComponent />
    <h2>
      Credits: Mohit-Maroliya
    </h2>
</div>
);
}

export default App;

TimeZone.js

import React, { useState, useEffect } from "react";

const TimeZoneComponent = () => {
const [data, setData] = useState([]);
const [city, setCity] = useState("");
const [printCity, setPrintCity] = useState(false);

const handleClick = () => {
  setPrintCity(true);
  if (printCity) {
    timeZone(city);
  }
};

async function timeZone(city) {
  await fetch(`http://worldtimeapi.org/api/timezone/Asia/${city}`)
    .then((response) => response.json())
    .then((json) => {
      //console.log(json);
      setData(json);
    });
}

useEffect(() => {
  timeZone();
}, []);

let mystr = JSON.stringify(data.datetime);

//console.log("city typed  =  "+city);

const cityToCodeMatcher = (city) => {
  let code;
  if (city === "Kolkata") code = "IN";
  else if (city === "Almaty") code = "KZ";
  else if (city === "Amman") code = "JO";
  else if (city === "Ashgabat") code = "TM";
  else if (city === "Baghdad") code = "IQ";
  else if (city === "Baku") code = "AZ";
  else if (city === "Bangkok") code = "TH";
  else if (city === "Beirut") code = "LB";
  else if (city === "Bishkek") code = "KG";
  else if (city === "Brunei") code = "BN";
  else if (city === "Kabul") code = "AF";
  else if (city === "Kathmandu") code = "NP";
  else if (city === "Kuala_Lumpur") code = "MY";
  else if (city === "Pyongyang") code = "KP";
  else if (city === "Manila") code = "PH";
  else if (city === "Riyadh") code = "SA";
  else if (city === "Sanghai") code = "CN";
  else if (city === "Seoul") code = "KR";
  else if (city === "Singapore") code = "SG";
  else if (city === "Taipei") code = "TW";
  else if (city === "Tashkent") code = "UZ";
  else if (city === "Tbilisi") code = "GE";
  else if (city === "Tehran") code = "IR";
  else if (city === "Thimphu") code = "BT";
  else if (city === "Tokyo") code = "JP";
  else if (city === "Ulaanbaatar") code = "MN";
  else if (city === "Yerevan") code = "AM";
  else code = "IN";
  return code;
};

const readySRC = (city) => {
  let temp = "https://www.countryflags.io/".concat(cityToCodeMatcher(city));
  return temp.concat("/shiny/64.png");
};

return (
  <>
    <div style={{ textAlign: "center", padding: "5%", fontSize: "120%" }}>
      <div>
        <label style={{ fontSize: "30px" }}>
          Type Asian City Here..
          <br />
          <input
            type="text"
            style={{ margin: "1%", fontSize: "20px" }}
            placeholder=" Type city here.."
           onChange={(event) => setCity(event.target.value)}
          />
          <br />
          <button onClick={() => handleClick()} style={{ fontSize: "20px" }}>
            Get Current DateTime
          </button>
        </label>
      </div>
      <div style={{padding:'2%'}}>
        Date: {mystr?.slice(1, 11)} <br />
        Time: {mystr?.slice(12, 20)} <br />
        Timezone: {data.timezone}
      </div>
      <div>
        <img src={readySRC(city)} alt="Country flag" />
      </div>
    </div>
  </>
 );  
 };
  export default TimeZoneComponent;

I am getting some error:

Mixed Content: The page at 'https://613c3d6616b9dee9895f96c9--adoring-einstein-8cdfd1.netlify.app/' was loaded over HTTPS, but requested an insecure resource 'http://worldtimeapi.org/api/timezone/Asia/undefined'. This request has been blocked; the content must be served over HTTPS.

Answer 1

There's an error right when you launch the site. Your local was http and your production is https but the API URL you have is http.

await fetch(`http://worldtimeapi.org/api/timezone/Asia/${city}`)

make it https.

Mixed content occurs when HTML on a website loads over a secure HTTPS connection (thanks to a recently installed SSL certificate) but other content, such as images, video content, stylesheets, and scripts, continue to load over an insecure HTTP connection. This results in some web content loading securely and some web content loading insecurely.