javascript - Javascript 中的 API 调用返回 CORS 错误

Question

我正在将 Google Maps API 与 Forecast.io 的 DarkSky API 集成。我的目标是用户在点击 map 上的标记后收到天气信息。这是我的代码:

google.maps.event.addListener(marker, 'click', function() {
    var darkRequest = new XMLHttpRequest();
    var darkURL = "https://api.forecast.io/forecast/API_KEY/"
    .concat(marker.position.lat().toString(), marker.position.lng().toString());
    darkRequest.open("GET", darkURL, false);
    darkRequest.send();
    console.log(darkRequest.status);
});

如您所见，我还没有完成信息窗口，但我正在努力克服我不断遇到的 CORS 错误，首先。这是我第一次使用 API 和一般的 API 调用。我需要做什么才能成功完成此通话？

这是天气 API 的链接:DarkSkyAPI

提前致谢

追逐

Answer 1

如果遇到 CORS 错误，则需要使用 JSONP，但不推荐这样做:

选项

可以选择通过使用查询参数来修改 API 请求。它将响应以下内容:

callback=[callback]:将 API 响应返回为 JSONP。 使用它时请小心，因为将您的 API key 公开给公众是一种安全隐患，如果滥用，将导致您的 API key 被吊销。但是，如果开发个人或内部使用的应用程序，这是一种方便的方法。

或(看起来他们希望您)通过您的服务器代理请求。它将您的 API key 保存在服务器本地。

适合我的 JSONP 代码(使用 JQuery，但这不是必需的，API key 已删除，但根据他们的文档不推荐):

function initialize() {
  var map = new google.maps.Map(
  document.getElementById("map_canvas"), {
    center: new google.maps.LatLng(37.4419, -122.1419),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var marker = new google.maps.Marker({
    position: map.getCenter(), 
    draggable: true, 
    map:map, 
    title: map.getCenter().toUrlValue(6)
  });
  google.maps.event.addListener(marker, 'click', function() {
    marker.setTitle(marker.getPosition().toUrlValue());
    var darkURL = "https://api.forecast.io/forecast/API_KEY/".concat(marker.getPosition().toUrlValue(6));
   // Using JSONP
   $.ajax({
     url: darkURL,
   // The name of the callback parameter, as specified by the YQL service
     jsonp: "callback",
   // Tell jQuery we're expecting JSONP
     dataType: "jsonp",
   // Work with the response
     success: function( response ) {
       console.log( response ); // server response
     }
   });
  })
}
google.maps.event.addDomListener(window, "load", initialize);