在 React 中访问 API JSON 数据

Question

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

-GET 'dark sky api url'401

-在“https://api.darksky....' from origin 'http://localhost:3000”获取的访问已被 CORS 策略阻止

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，我们非常重视安全。作为安全预防措施，我们已在我们的服务器上禁用 cross-origin 资源共享 (CORS)。

您的 API 调用包括您的秘密 API 密钥作为请求的一部分。如果您要从 client-facing 代码进行 API 调用，任何人都可以提取并使用您的 API 密钥，这将导致您必须支付账单。我们禁用 CORS 以帮助保密您的 API 密钥。

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

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

Answer 2

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

在 React 中访问 API JSON 数据

Access API JSON data in React

javascript

api

geolocation

reactjs