React项目ISS接口生产环境调用失败，开发环境正常求助

问题根源 #

1. 混合内容错误：你的Netlify站点采用HTTPS协议，但直接请求http://api.open-notify.org/iss-now.json属于HTTP资源，浏览器的安全策略会拦截这类跨协议请求。
2. HTTPS连接拒绝：api.open-notify.org这个接口不支持HTTPS，所以改成HTTPS请求会直接被服务器拒绝。

解决方案：用Netlify代理转发请求 #

Netlify支持配置代理规则，让前端请求自己的HTTPS域名下的路径，再由Netlify转发到目标HTTP接口，完美规避混合内容问题：

1. 在项目根目录创建netlify.toml文件，添加以下代理配置：

[[redirects]]
  from = "/api/iss-now"
  to = "http://api.open-notify.org/iss-now.json"
  status = 200
  force = true

2. 修改你的接口请求代码，把目标地址换成代理路径：

try {
  // 改为请求Netlify代理后的路径
  const response = await fetch("/api/iss-now");
  const data = await response.json();
  return data;
} catch (error) {
  console.log(error);
}

额外优化：修复useEffect无限循环问题 #

你当前的useEffect依赖是[issData]，这会导致每次issData更新就触发新的请求，陷入无限循环。如果需要实时追踪ISS位置，建议用定时器定时请求：

useEffect(() => {
  // 每5秒刷新一次ISS位置（可根据需求调整间隔）
  const interval = setInterval(async () => {
    try {
      const data = await getIssData();
      setIssData(data);
    } catch (err) {
      console.log(err);
    }
  }, 5000);

  // 组件卸载时清理定时器
  return () => clearInterval(interval);
}, []); // 空依赖只在组件挂载时执行一次

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