如何通过 $.loadJSON 使用 DarkSky API 请求？

Question

我的天气应用程序需要使用天气信息，因此我使用 DarkSky 为我提供该信息。我决定使用 jQuery 的 $.loadJSON 从 API 获取天气数据。为什么下面的代码不起作用？

我已尝试查看 jQuery 文档，但未发现任何错误。我已将 $.loadJSON() 换成 $.ajax() 和 $.get()。我已经测试了经度和纬度是正确的。我已确保没有控制台错误。


let latitude = place.geometry.location.lat();
let longitude = place.geometry.location.lng();
let api = `https://api.darksky.net/forecast/[API Key]/${latitude},${longitude}`;

$.getJSON(api, (data, status, xhr) => {
    alert("API called.");

    let locationElement = document.querySelector("[data-location]");
    let statusElement = document.querySelector("[data-status]");
    let temperatureElement = document.querySelector("[data-temperature]");
    let humidityElement = document.querySelector("[data-humidity]");
    let windElement = document.querySelector("[data-wind]");

    locationElement.innerHTML = place.formatted_address;
    statusElement.innerHTML = data.currently.summary;
    temperatureElement.innerHTML = data.currently.temperature;
    humidityElement.innerHTML = data.currently.humidity;
    windElement.innerHTML = data.currently.windSpeed;
});

我的预期结果是代码会将页面上的所有标签编辑为天气信息。实际结果是什么都没有发生。标签保持默认状态。

Answer 1

您应该得到控制台错误。如果不这样做，那么您可能会遇到其他问题。

不过，尝试解决那个没有什么意义。正如他们在常见问题解答中解释的那样，they do not permit client-side cross-origin requests 出于安全原因。

Why do I get the error No 'Access-Control-Allow-Origin' header is present on the requested resource when I try to call the API? We take security very seriously at Dark Sky. As a security precaution we have disabled cross-origin resource sharing (CORS) on our servers.

Your API call includes your secret API key as part of the request. If you were to make API calls from client-facing code, anyone could extract and use your API key, which would result in a bill that you'd have to pay. We disable CORS to help keep your API secret key a secret.

To prevent API key abuse, you should set up a proxy server to make calls to our API behind the scenes. Then you can provide forecasts to your clients without exposing your API key.

如何通过 $.loadJSON 使用 DarkSky API 请求？

How to use DarkSky API request with $.loadJSON?

javascript

weather-api