CODEWITHSUNDEEP
javascriptangularjscross-domain
Kichu
Kichu

Reputation: 1731

Cross domain issue in Google API's using angularJs

I am using following code to get the location details from the google API.

My code :

 if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position){
      $scope.$apply(function(){
        $http.get('http://maps.googleapis.com/maps/api/geocode/json?latlng='+position.coords.latitude+','+position.coords.longitude+'&sensor=true').then(function(res){
          alert(res.data);
        });


      });
    });
  }

When I try this code I am getting the Cross domain Error.

My Error:

XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/geocode/json?latlng=8.5663029,76.8916023&sensor=true. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Please suggest to solve this issue

Upvotes: 2

Views: 2386

Answers (3)

pitakill
pitakill

Reputation: 1

I can't answer in the threat of the response i want, but

Maybe your are using Interceptors in your AngularJS application, so your request is modified some time later after your configure the:

{headers: { Authorization: null } }

I'm doing more research to overcome this. I'll post my finds later.

[Edit] Wed Jul 13 2016 21:38:03 GMT-0500 (CDT) [/Edit]

My solution to this, is going with straight Javascript, in that way my petition does not is intercepted by Interceptors from the $http Service and does not have the Authorization header.

So, maybe this help someone.

Cheers!

Upvotes: -1

Andrés Sebastián Díaz Vargas
Andrés Sebastián Díaz Vargas

Reputation: 31

I had the same issue; I was using the satellizer module for authentication. https://github.com/sahat/satellizer

As it says on the FAQ section: "How can I avoid sending Authorization header on all HTTP requests?"

I did:

$http({
  method: 'GET',
  url: 'your google api URL',
  skipAuthorization: true  // `Authorization: Bearer <token>` will not be sent on this request.
});

And it solved my problem; maybe you are using a third party module that modifies the header.

Upvotes: 2

Jaromanda X
Jaromanda X

Reputation: 1

You're sending an Authorization header ... which causes a CORS preflight check, and google doesn't like the Authorization header

you need to remove this header from the API call

see if this helps

$http.get("your long url", {headers: {Authorization: undefined}})

obviously I've replaced the actual url for readability

I've also seen the following suggestion

$http( {
     method: 'GET',
     url: 'someurl',
     headers: {
       'Authorization': undefined
     }
   }
 )

so, rather than using the $http.get "shortcut", use $http "general" request format

Upvotes: 2

Related Questions