在 React 中访问 API JSON 数据

Question

我正在尝试通过使用 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>
      );

  }

Answer 1

为什么我在尝试调用 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

Answer 2

您的问题是您在前端公开了 API 密钥。您必须从后端拨打电话。