API 时区在部署后不起作用

Question

我创建了一个 timeZone 应用程序项目，以基于 React 框架获取亚洲城市（巴库、喀布尔、东京、加尔各答...）的时间，该应用程序从 worldtimeapi（example of Baku) 并且项目已成功完成，它在我的本地主机上运行很棒，之后我创建了一个构建文件夹并部署在 Netlify 托管平台上，但是在部署之后它不仅不起作用但是相同的 API 呼叫和代码已运行在我的本地网络上完全成功，服务... 这是已部署的项目：link

这是代码：

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;

我遇到一些错误：

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

启动网站时出现错误。您的本地是 http，您的产品是 https，但您拥有的 API URL 是 http。

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

设为 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.

API 时区在部署后不起作用

API of timezone is not working after deployment

javascript

api

https

reactjs

netlify

App.js

TimeZone.js