javascript - 跨源请求被阻止 : Multiple API; need to aggregate data

Question

目标:从至少 3 个 API 获取几天的 precipIntensity。主要问题:Cross-Origin Request Blocked，导致数据未定义。什么是跨源请求？我该如何解决这个干扰 If() 语句并将收集到的 JSON 数据收集到聚合中以获取平均沉淀的问题？更新的解决方案:

    //Get the back dated times and current in UNIX, 
   //later make a lookup that gives datediff from current date and user's date and adjust index i condition to equal exact days.
            var totalPrecipSinceDate;
            var threeDayAPITimes = [];

        for (var i = 0; i <= 2; i++) //place user userData-1 where i <= input
    {
        var myDate = new Date(); //http://stackoverflow.com/questions/7693170/javascript-convert-from-epoch-string-to-date-object
        var epoch = myDate.getTime(); 
        var unixEpoch = Math.round(epoch/1000)
        threeDayAPITimes[i] = Math.round(unixEpoch - (86400 * i));

    }
    //Plan to convert UNIX dates to display

    //List of locations: LATITUDE,LONGITUDE
    var locations = ["46.3494,-85.5083"]

    //setup a server-side proxy which would hide the API key from the client side
    var currentAPIKey ="privateKey"; //gets an APIkey from user input.



var listAPIs = "";

$.each(threeDayAPITimes, function(i, time) {
    var darkForecastAPI= "https://api.forecast.io/forecast/" + currentAPIKey + "/" + locations + "," + time +"?callback=?"; 
     $.getJSON(darkForecastAPI, {
        tags: "WxAPI[" + i + "]",  //Is this tag the name of each JSON page? I tried to index it incase this is how to refer to the JSON formatted code from the APIs.
        tagmode: "any",
        format: "json"
    }, function(result) {
        // Process the result object    
        var eachPrecipSum = 0;
    if(result.currently.precipIntensity >=0 && result.currently.precipType == "rain")
        {
            $.each(result, function() {
              eachPrecipSum += (this.currently.precipIntensity);
              totalPrecipSinceDate += eachPrecipSum ;  ///Write mean precip
                        alert(eachPrecipSum );
        });

    }   
});
});

Answer 1

跨源请求是指您向另一个域发出请求。为了保护用户，默认情况下不允许这样做。浏览器使用同源策略。这意味着您只能在同一域上发出请求。

您无法解决跨源请求问题。 forecast.Io 的所有者必须使用 HTTP header 授权您的域。我猜他们不会那样做。基本上，CORS 让源代码控制谁可以使用 API，而不是消费者。

您最好的选择可能是解决该限制。您将需要使用 JSONP。他们支持这一点，但在他们的 documentation 中注意到这一非常明智的警告。 :将 API 响应返回为 JSONP。使用它时请小心，因为将您的 API key 公开给公众是一种安全隐患，如果被滥用，将导致您的 API key 被吊销。但是，如果开发个人或内部使用的应用程序，这是一种方便的方法。

要启用 JSONP，只需输入 ?callback=?作为您的 URL 的查询字符串。这将使 jQuery 设置 JSONP。在您的示例中，您可以在构建 URL 的任何地方执行此操作，因此在这里:

var darkForecastAPI= "https://api.forecast.io/forecast/" + currentAPIKey + "/" + locations + "," + time +"?callback=?";

但是，正如他们所说，您的 API key 已暴露，所以要小心。如果可能，请在您的服务器上创建一个服务器端 Web 服务，充当您的 JavaScript 与其 API 之间的代理。不确定这是否可行，但在他们的网站上，他们提供了一个用 PHP 编写的，您可以很容易地用任何语言编写一个。

让我也为您介绍一下 JSONP 的背景知识，因为这可能是您第一次听说它。有风险。与返回对象的 JSON 不同，JSONP 实际上调用了一个 JS 函数并直接执行代码。这意味着如果存在恶意站点，它可能会造成损害。我不会太担心 forecast.Io，但如果它是一些 shadyrussianmp3 网站，我会小心!它的工作方式是注入(inject)一个 <script src="http://forecast.io/blah/blah/blah/?callback=jquery_12345" ></script>在您的页面中标记。脚本标签没有同源限制。该文件基本上将 JSON 对象包装到对 jquery_12345 的调用中，jQuery 为您抽象了它，因此它可以正常工作。除了安全之外，另一个缺点是没有好的方法来检测故障。 JQuery 将通过超时来提供帮助，它可以用来“假设”失败，但您不会收到 500 错误或任何与真正的 JSON 类似的错误。