Javascript 访问谷歌地图时区API问题

我正试图根据以下指南访问谷歌地图时区api：

如果我将url:“”放在浏览器中，我可以得到预期的结果：

{
   "dstOffset" : 3600,
   "rawOffset" : -18000,
   "status" : "OK",
   "timeZoneId" : "America/Toronto",
   "timeZoneName" : "Eastern Daylight Time"
}

然后，我尝试用angularJs访问这个API。因此，我使用通常用于访问其他API的方式，如下所示：

 var googleGeoTimeDefrred;
 var getGoogleGeoTime = function(position) {
    googleGeoTimeDefrred = $q.defer();
    var userId = store.get("profile").user_id;
    $http({
      method:"GET",
      url: "https://maps.googleapis.com/maps/api/timezone/json?key=MY_API_KEY&location=43.7029682,-79.62146709999999&timestamp=1500669556"
  }).then(function (success) {
      googleGeoTimeDefrred.resolve(success);
    }, function (error) {
      googleGeoTimeDefrred.reject(status);
    });
    return googleGeoTimeDefrred.promise;
 };

但我有一个错误：

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/timezone/json?key=MY_API_KEY&location=43.7029682,-79.62146709999999&timestamp=1500669556. Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response.

我对angularJs是新手。使用上述方法访问其他API（不是从google）没有问题。有人知道是什么导致了这个问题吗

---

谢谢。

我尝试了在stackoverflow上找到的不同方法。例如：

最后，我通过在system.webServer下的Web.config文件中添加以下内容来解决问题

<httpProtocol>
  <customHeaders>
    <add name = "Access-Control-Allow-Origin" value="http://localhost"/>
    <add name = "Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Cache-Control"/>
    <add name = "Access-Control-Allow-Credentials" value="true"/>
    <add name = "Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS"/>
                    
   </customHeaders>
              
</httpProtocol>

希望这能帮助其他遇到这个问题的人