Angular and google distance matrix no access control header

Question

I'm getting

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=bl79yt&destinations=cw73bz&key=mykey. No 'Access-Control-Allow-Origin' header is present on the requested resource.

In my angular app. I have my http request to the google distance matrix like this :

 var url = 'https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=' + pcodefrom + '&destinations=' + pcodeto + '&key=mykeyhere';
  console.log(url);
     $http({method: 'GET', url: url,headers: {
            "X-Content-Type-Options": "nosniff",
            "X-Frame-Options": "SAMEORIGIN",
            "X-Rack-CORS": "preflight-hit; no-origin"
        }}).success(function(data) {
            };
                    }).error(function(data){

                    });

Ive allowed the website url in the google api console but it's still not working.

xomena xomena · Accepted Answer · 2017-05-03T16:23:09

There is nothing you can do because the CORS headers should be set on Google backend servers.

To avoid CORS issues you should use the distance matrix service of Google Maps JavaScript API:

https://developers.google.com/maps/documentation/javascript/distancematrix

Angular and google distance matrix no access control header

1 Answers