时间戳

首页 > 解决方案 > 在 React 中访问 API JSON 数据

javascript - 在 React 中访问 API JSON 数据

问题描述

我正在尝试通过使用 ip-api 构建天气应用程序来获取用户当前的纬度和经度，并将其传递到 darksky api URL 以获取天气 JSON 数据。我的 lat 和 lon 记录正常，但 Darksky 调用出现以下错误。我试图从一个 API 中提取数据并使用另一个 API 是否做错了什么？或者它只是在我试图这样做的方式？

-GET'dark sky api url' 401

-CORS策略已阻止从源“ http://localhost:3000 ”获取“ https://api.darksky ....”的访问权限

getLocation = async (e) => {
  e.preventDefault();
  const api_call = await fetch("http://ip-api.com/json");
  const data = await api_call.json();
  console.log(data.lat, data.lon);
  let lattitude = data.lat;
  let longitude = data.lon;

  const weather_call = await fetch(`https://api.darksky.net/forecast/${API_KEY}/${lattitude},${longitude}`);
  const weather_data = await weather_call.json();
  console.log(weather_data);
}

  render() {
    const {to, getLocation, ...rest} = this.props;
      return (
        <div className="App">
          <Landing getLocation={this.getLocation}/>
        </div>
      );

  }

标签： javascriptreactjsapigeolocation

解决方案

为什么我在尝试调用 API 时收到错误 No 'Access-Control-Allow-Origin' header is present on the requested resource？在 Dark Sky，我们非常重视安全。作为安全预防措施，我们在我们的服务器上禁用了跨域资源共享 (CORS)。

您的 API 调用将您的 API 密钥作为请求的一部分。如果您要从面向客户端的代码进行 API 调用，任何人都可以提取和使用您的 API 密钥，这将导致您必须支付账单。我们禁用 CORS 以帮助保护您的 API 密钥。

为防止 API 密钥滥用，您应该设置代理服务器以在后台调用我们的 API。然后，您可以在不暴露 API 密钥的情况下向您的客户提供预测。

你可以在这里搜索https://darksky.net/dev/docs/faq

推荐阅读