XMLHttpRequest cannot load... Request header field Authorization is not allowed by Access-Control-Allow-Headers

[Bennett Adams]

Hi, 

I am developing a MEAN stack application that uses JWT for authentication, and the strategy I'm using is the one described in scotch.io's MEAN Machine book, where you employ $httpProvider.interceptors to add an 'Authorization' header to include the token on every request sent from the client. However, this seems to cause the google maps api to reject requests to the geocoder.

Specifically, the app executes a script that gathers city and state data from a list and sends a request for each city in the list to the google maps API to return geocoordinates for that city, but now I am getting the following error for every city it looks up: 

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/geocode/json?address=LINCOLN,+ME&key=<API_KEY>. Request header field Authorization is not allowed by Access-Control-Allow-Headers.

I doubt I am the first to come across this error, but there seems to be a paucity of answers out there. 

I have tried conditionally adding the Authorization header only when the request url is not maps.googleapis.com:

interceptorFactory.request = function(config) { 

      if (!_.startsWith(config.url, 'https://maps.googleapis.com') {  // also tried "if (config.url.substr(8,19)  !== 'maps.googleapis.com') {"

        // grab the token

        var token = AuthToken.getToken();

        // if the token exists, add it to the header as Authorization

        if (token) { 

          config.headers['Authorization'] = token;

        }

      }

      return config; 

    };

But that hasn't solved it. Might anyone else have come across this issue or have any advice to offer? Thanks very much! Bennett