Access Google Maps Time Zone API issue

Question

I am trying to access the google maps time zone api according to the guide lines here: https://developers.google.com/maps/documentation/timezone/intro

If I put the url:"https://maps.googleapis.com/maps/api/timezone/json?key=MY_API_KEY&location=43.7029682,-79.62146709999999&timestamp=1500669556" in the browser, I can get the expected result as:

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

Then, I am trying to access this API in angularJs. So I am using the way as I usually use to access other APIs as following:

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

But I got error:

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.

I am new to angularJs. I have no problems to use the above way to access other APIs(not from google). Does anyone know what causes this problem?

Thank you.

score 0 · Answer 1 · answered Jul 24 '17 at 14:08

I tried different approaches I found on stackoverflow. Such as:

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

Finally I solved problem by adding the following to my Web.config file under system.webServer.

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

Hope this helps others who meets this problem.

Access Google Maps Time Zone API issue

1 Answers1