失败的 openWeatherMap API 调用

如何解决失败的 openWeatherMap API 调用

一直致力于使用 openWeatherMap API 检索给定位置的当前天气状况的小型 React 应用。

在我的系统上本地测试时，该应用程序运行完美。但是，它在同时部署到 Github 和 Heroku 时无法返回结果。

我几乎尝试了所有方法，但没有办法。我什至将 API 调用硬编码到浏览器的地址栏并返回结果，但是当相同的搜索字符串硬编码到应用程序中时，调用失败！

有人知道我在这里做错了什么吗？

这是进行 API 调用的代码块（带有硬编码参数）：

fetch(
     "http://api.openweathermap.org/data/2.5/weather?units=metric&q=durban&appid=d6e0e85a41968aaf6240b5ed27522ebd"
   )

提前致谢。

注意：返回的错误是：无法获取

这里是完整的获取功能：

  function getForecast(e) {
    e.preventDefault();
    // Next,make the call to the openweathermap API,with the parameters for the specified city
    // fetch(
    //   `http://api.openweathermap.org/data/2.5/weather?units=${unit}&q=${city}&appid=${keys.openweathermap_API_KEY}`
    // )
   
fetch(
     "http://api.openweathermap.org/data/2.5/weather?units=metric&q=durban&appid=d6e0e85a41968aaf6240b5ed27522ebd"
   )

      .then((response) => response.json())
      .then(
        (response) => {
          setResponSEObj(response);
        },(error) => {
          alert("Error in fetching weather data : " + error.message);
        }
      );
  }

解决方法

事实证明 - 肯尼·约翰·雅各布在某种程度上是对的！（某种意义上）。问题是在应用程序 url 中使用了安全的 http 协议（由 Heroku 部署模块生成）。如果仅使用 http 访问应用程序，则 api 调用就像魅力一样。我不可能在一百万年内猜到这一点。感谢所有同样的雅各布

这段代码似乎也适用于我。您可能需要为 URL 使用 https，因为浏览器会拒绝启用 https 的网站上的 http 请求。