如何在$ .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

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

尽管尝试解决that毫无意义。正如他们在常见问题解答中所解释的，出于安全原因，they do not permit client-side cross-origin requests。

为什么出现错误？没有“ Access-Control-Allow-Origin”标头是尝试调用API时在请求的资源上显示？我们采取黑暗天空非常重视安全性。为了安全起见，我们有在我们的服务器上禁用了跨域资源共享（CORS）。

您的API调用将您的API秘密密钥作为请求的一部分。如果您将通过面向客户端的代码进行API调用，任何人都可以提取并使用您的API密钥，这将导致您产生帐单必须付钱。我们禁用CORS来帮助您保留API密钥秘密。

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