Google directions web services Origin 'http://localhost:8080' is therefore not allowed access


#1

Hello, I have an app on ionic 3, which sent 2 locations to the API of Google’s directions web services and a few days ago it worked. Suddenly I stop working and I get the following error:

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/directions/json?origin=-0.2556527,-78.…ence=less_driving&units=metric&key=AIzaSyDJ1yDrTnpxGt8kKsqcXl_34PHZYM9otWE. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. 

#2

Hi @wuilmerj24! :wave:

By the error message, it seems that this API is not CORS enabled. The HTTP endpoint is not intended to be used directly in the client (like an app) but in the server, since you’re also sending an API key in your URL which should be secret (be careful with this!).

From the Google Maps Directions API: https://developers.google.com/maps/documentation/directions/intro

The video includes advice on proxying the web service via your server when you’re using the API in a mobile app, to protect your API key.

It seems that it is possible to use this service in an app through the Javascript library and the DirectionsService as it’s served from the same origin: https://developers.google.com/maps/documentation/javascript/examples/directions-simple

Best,
Rodrigo


#3

Hello, thanks for answering. Yes already. The strange thing is that it lasts 6 months consuming the api from the app.


#4

Maybe Google noticed that developers were exposing their API keys on the web without noticing and decided to remove support for CORS and make them move to the Javascript library.