基于React的时区查询应用部署Netlify后worldtimeapi调用失败

核心错误原因 #

• 混合内容拦截：Netlify部署的站点是HTTPS协议，你代码中调用的worldtimeapi使用的是HTTP协议，浏览器安全策略会直接阻止HTTPS站点发起的HTTP请求，本地用localhost运行时无HTTPS限制所以正常
• 初始请求参数缺失：组件挂载时的useEffect钩子调用timeZone()没有传入城市参数，导致请求路径出现Asia/undefined的无效地址
• 按钮点击逻辑存在异步问题：setPrintCity是异步更新状态，你在设置后立刻判断printCity的值，第一次点击时状态还没更新，不会触发请求

具体修复步骤 #

1. 修改API请求协议 #

将TimeZone.js中的fetch请求地址的http改为https，worldtimeapi本身支持HTTPS访问：

async function timeZone(city) {
  // 仅修改协议部分即可
  await fetch(`https://worldtimeapi.org/api/timezone/Asia/${city}`)
    .then((response) => response.json())
    .then((json) => {
      setData(json);
    });
}

2. 修复初始请求问题 #

两种方案二选一：

• 方案A：给timeZone设置默认城市参数，初始加载就展示默认城市时间，示例：

async function timeZone(city = "Shanghai") {
  // 其余逻辑不变
}

• 方案B：移除useEffect中的初始调用，只在用户点击按钮时发起请求：

// 直接删除这部分代码即可
// useEffect(() => {
//   timeZone();
// }, []);

3. 修复按钮点击逻辑 #

去掉冗余的printCity判断，点击按钮直接发起请求即可，还可以补充空值校验避免无效请求：

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

修改完成后重新打包部署到Netlify即可正常运行。

内容的提问来源于stack exchange，提问作者MagnusEffect