Cross domain issue in Google API's using angularJs

Question

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

You have to add authorization header first. your request should be $http.jsonp or do method: 'JSONP' — Parth Trivedi
– Parth Trivedi, Commented Feb 4, 2016 at 10:09
Request header field Authorization is not allowed - the problem could be that ?something? is adding a request header Authorization ... google doesn't like that, it seems ... CORS is not usually an issue with that API call — Jaromanda X
– Jaromanda X, Commented Feb 4, 2016 at 10:13
@ParthTrivedi You have to add authorization header first ... the problem is the existence of the Authorization header!! not the lack of it — Jaromanda X
– Jaromanda X, Commented Feb 4, 2016 at 10:29

Jaromanda X · Accepted Answer · 2016-02-04 11:43:09Z

2

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

edited Feb 4, 2016 at 11:43

answered Feb 4, 2016 at 10:26

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Parth Trivedi Over a year ago

oh it seems problem with this. hmm

Jaromanda X Over a year ago

@ParthTrivedi - what are you trying to say? I don't understand, sorry

Parth Trivedi Over a year ago

you are right.problem with passing header that is not mentioned in OP's code.

Jaromanda X Over a year ago

@ParthTrivedi that is not mentioned - it is mentioned in the CORS error message, that's how I know which one to remove :p

Kichu Over a year ago

To solve the cross domain issue do we need to pass headers: {Authorization: null} ?

|

Andrés Sebastián Díaz Vargas · Accepted Answer · 2016-06-22 19:27:48Z

2

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.

answered Jun 22, 2016 at 19:27

Andrés Sebastián Díaz Vargas

312 bronze badges

Comments

pitakill · Accepted Answer · 2016-07-14 02:37:11Z

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

edited Jul 14, 2016 at 2:37

answered Jul 13, 2016 at 19:19

pitakill

11 bronze badge

Collectives™ on Stack Overflow

Cross domain issue in Google API's using angularJs

3 Answers 3

14 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

14 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related