访问谷歌地图时区 API 问题答案

【问题标题】：Access Google Maps Time Zone API issue访问谷歌地图时区 API 问题
【发布时间】：2017-12-30 01:03:40
【问题描述】：

我正在尝试根据此处的指南访问 google maps time zone api：https://developers.google.com/maps/documentation/timezone/intro

如果我将 url:"https://maps.googleapis.com/maps/api/timezone/json?key=MY_API_KEY&location=43.7029682,-79.62146709999999&timestamp=1500669556" 放在浏览器中，我可以得到预期的结果：

{
   "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（不是来自谷歌）。有谁知道是什么导致了这个问题？

谢谢。

【问题讨论】：

标签： javascript angularjs google-maps-timezone

【解决方案1】：

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

CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response

Request header field Access-Control-Allow-Headers is not allowed by itself in preflight response

Request header field is not allowed by Access-Control-Allow-Headers with $http

最后我通过将以下内容添加到 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>

希望这对遇到此问题的其他人有所帮助。

【讨论】：