Javascript中的API调用返回CORS错误

我正在将Google地图API与Forecast.io的DarkSky API集成。我的目标是用户在单击地图上的标记时接收天气信息。这是我的密码：

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);
});

正如您所看到的，我还没有完成infowindow，但我正在努力克服我一直遇到的CORS错误，首先。这是我第一次处理API和API调用。我需要做什么才能成功接通此电话

以下是天气API的链接：

提前感谢,

---

Chase

如果您遇到CORS错误，您需要使用JSONP，这是不推荐的：

选项

可以选择通过使用查询参数来修改API请求。它将对以下问题作出回应：

callback=[callback]：将API响应返回为JSONP使用时请小心，因为向公众公开API密钥是一种安全隐患，如果滥用，将导致API密钥重新登录。但是，如果开发个人或内部使用的应用程序，这是一种方便的方法

或者（看起来他们希望您）通过服务器代理请求。它将API密钥保持在服务器本地

适用于我的JSONP代码（使用JQuery，但这不是必需的，API密钥已删除，但不推荐按照他们的文档使用）：

---

Bergi链接中的GitHub已经设置了一个代理，所以我所要做的就是应用该代理，API调用开始工作。

阅读本文，您是否查看了？我在URL中添加了&callback=blargh，看看这是否有任何作用（blargh是一个只转储所传递内容的函数），但什么都没有发生。我仍然得到错误。由于托管问题，php代理不太可能。如果我使用php代理，它对我有效。您必须删除XmlHttpRequest，因为如果不允许COR，这将不起作用。您的地图页是否可供一般公众使用（即使有登录要求），还是供内部使用，例如在所有用户都受信任的公司LAN上？如果页面仅由您信任的同事使用，那么当然可以使用JSONP。如果它是对公众开放的，那么你真的必须通过服务器代理请求（使用你想要的任何服务器语言），否则有人可能会滥用你的API密钥。只有一个人会看到它，但我已经让代理工作，尽管我之前遇到了托管问题。

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);