Request header field Authorization is not allowed by Access-Control-Allow-Headers Google Maps Geocoding

Question

I am trying to use google maps geocoding for my site. When I submit a request my code is as follows

GeocodeRequest.js

$http({
               url: 'https://maps.googleapis.com/maps/api/geocode/json',
               method: "GET",
               headers: {
                   'accept': 'text / html, application/xhtml+xml,application/xml;q=0.9, image/webp,image/apng, */*;q=0.8',
                   'accept-language':'en-US,en;q=0.8,pl;q=0.6',
               },
               params: {
                   address: $scope.newVenue.Address + ", " + $scope.newVenue.City + ", " + $scope.newVenue.State,
                   key: 'MYKEY'
               }
           })

However in the console I am getting an error that states:

Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

I have tried including

'Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS'

in my headers section but the error remains. Reading on this error I have found suggestions to install CORS but that is not an option in my case.

Any suggestions on how to fix this would be great. Thanks

Answer 1

you cannot resolve this on client side. Are you sure you are not sending Authorization header?

I had the same error. I am using Restangular and global settings always add Authorization header so I needed to override global settings by setting headers to empty object.

Hope it helps.