javascript - 在 React 中访问 API JSON 数据

Question

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

-GET 'dark sky api url' 401

-访问“https://api.darksky” ....' 来自原点' 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 时，为什么会收到请求的资源上不存在“Access-Control-Allow-Origin” header 的错误消息？在 Dark Sky，我们非常重视安全。作为安全预防措施，我们在我们的服务器上禁用了跨源资源共享 (CORS)。

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

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

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