调用 openWeatherMap API 失败

Question

一直在开发一个使用 openWeatherMap API 检索给定位置的当前天气状况的小型 React 应用程序。

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

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

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

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

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

提前致谢。

N.B：returned 的错误是：获取失败

这是完整的获取函数：

  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);
        }
      );
  }

Answer 1

事实证明 - Kenny John Jacob 在某种程度上是正确的！（某种意义上）。问题是在应用 url 中使用了安全的 http 协议（由 Heroku 部署模块生成）。如果仅使用 http 访问该应用程序，则 api 调用就像魅力一样。我不可能在一百万年内猜到这一点。还是谢谢 Jacob

Answer 2

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

调用 openWeatherMap API 失败

Failed openWeatherMap API call

reactjs

api

github

heroku

openweathermap