0

I'm trying to make a call from an Angular app but I am getting the following error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

Here is my code:

constructor(private http: Http) { 
  }

getNearbyRestaurants(lat: number, lng: number){
    return this.http.get(this.API_URL+this.API_KEY+`&location=${lat},${lng}`).pipe(
      map(result => result)
        );
      }
    }

Does anybody know how to resolve this? Thanks

xomena
  • 31,125
  • 6
  • 88
  • 117
david moeller
  • 335
  • 1
  • 3
  • 15

1 Answers1

5

You try to use a Places API web service call via AJAX request. In this case you are facing a Same Origin policy. Unfortunately, Google servers doesn't set CORS headers in the response and your browser blocks this request.

Google supposes that Places API web service requests are executed server side, but you try to do it on client side. For client side Google has a places library in Maps JavaScript API that provides a functionality similar to web services.

In order to solve your issue you should use a places library of Maps JavaScript API or create intermediate server that sends requests to Google and passes results back to your Angular application.

You can see example for nearby search written with places library of Maps JavaScript API at https://developers.google.com/maps/documentation/javascript/examples/place-search

I hope this helps!

xomena
  • 31,125
  • 6
  • 88
  • 117