AngularJS and the challenge of working with Google API's across different domains

Question

AngularJS and the challenge of working with Google API's across different domains

I have been using the code below to obtain location details from the Google API.

This is 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);
        });


      });
    });
  }

However, when I run this code, I encounter a Cross domain Error.

The error message reads as follows:

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.

I am seeking suggestions on how to resolve this issue.

javascript angularjs cross-domain

Answer 1

Answer №1

When making a request, be mindful of the Authorization header being sent as it triggers a CORS preflight check that Google disapproves of

To resolve this issue, simply exclude the Authorization header from your API call

Try implementing the following code snippet:

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

Note that I swapped out the actual URL for clarity purposes

Another alternative suggestion involves using the $http "general" request format instead of the $http.get shortcut:

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

By adopting this approach, you can steer clear of the CORS preflight check while ensuring the smooth execution of your API calls

Answer 2

When making a request, be mindful of the Authorization header being sent as it triggers a CORS preflight check that Google disapproves of

To resolve this issue, simply exclude the Authorization header from your API call

Try implementing the following code snippet:

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

Note that I swapped out the actual URL for clarity purposes

Another alternative suggestion involves using the $http "general" request format instead of the $http.get shortcut:

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

By adopting this approach, you can steer clear of the CORS preflight check while ensuring the smooth execution of your API calls

Answer 3

Answer №2

Encountered a similar issue when utilizing the satellizer module for authentication. https://github.com/sahat/satellizer

Per the FAQ section: "How can I prevent sending Authorization header on all HTTP requests?"

This approach worked for me:

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

Implementing this fix resolved the issue, possibly due to interference from a third-party module altering the header.

Answer 4

Encountered a similar issue when utilizing the satellizer module for authentication. https://github.com/sahat/satellizer

Per the FAQ section: "How can I prevent sending Authorization header on all HTTP requests?"

This approach worked for me:

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

Implementing this fix resolved the issue, possibly due to interference from a third-party module altering the header.

Answer 5

Answer №3

Unfortunately, I am unable to respond directly to the original comment, but

It seems like you might be utilizing Interceptors within your AngularJS application, which could potentially modify your request after you initially configure it:

{headers: { Authorization: null } }

I am currently conducting further research to address this issue. I will share my findings at a later time.

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

To work around this problem, I have opted to utilize pure Javascript instead. By bypassing the Interceptors in the $http Service, my request is not intercepted and does not include the Authorization header.

Hopefully, this solution may be beneficial to others facing similar challenges.

Cheers!

Answer 6

Unfortunately, I am unable to respond directly to the original comment, but

It seems like you might be utilizing Interceptors within your AngularJS application, which could potentially modify your request after you initially configure it:

{headers: { Authorization: null } }

I am currently conducting further research to address this issue. I will share my findings at a later time.

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

To work around this problem, I have opted to utilize pure Javascript instead. By bypassing the Interceptors in the $http Service, my request is not intercepted and does not include the Authorization header.

Hopefully, this solution may be beneficial to others facing similar challenges.

Cheers!

AngularJS and the challenge of working with Google API's across different domains

Answer №1

Answer №2

Answer №3

Similar questions

Incorporate a loader when making an AJAX request and then conceal it after it has successfully completed

I want to modify a script for toggling a div's visibility to utilize a select dropdown menu instead of radio buttons

Implementing distinct usernames using Firebase's simplelogin

What is the best way to include a title and a close button at the top of a menu, before the first item, when a button menu is clicked in material-ui?

Explore jQuery UI Tabs with remote content, highlighting the active tab with a link to the current page

Save data from localStorage to clipboard with a click of a button

PHP AJAX for a Multi-Select Form

Fetching data in React hooks can be done without relying on useEffect or setTimeout. Instead, you can utilize other methods to achieve

What is the best way to conceal a button before printing and have it reappear once the printing process is finished?

Iterating through JavaScript objects using the foreach method

Attempting to connect information to state using an input field that is being iterated over in React

Can you share the method for concatenating an object at a specific index within an Array using JavaScript?

What is the best way to split the vertices of a mesh in Three.js?

Utilize URL parameters in Node.js and Express for effective communication

Attempting to modify the key values within an object, however, it is mistakenly doubling the values instead

Ways to make webpack load the umd bundle of a library

Ways to retrieve data from various MongoDB collections in state with Express?

Is there a way to utilize JavaScript or jQuery to modify the background color of the `Save` and `Cancel` buttons within a SharePoint 2013 edit form?

Combine two redux actions and access the modified state in the second action

Is there a different option besides using the scale() function in CSS for transforming elements