2

I'm trying to request some information from the Google Places API using Angular 5 but I'm always getting this CORS error:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

But when I see the network tab from the developer tools I can see that the http call is returning a 200 status code with the requested information.

This is how I'm calling the Places API:

getAutocompleteSuggestions(location: string, position?: Position): Observable<Object> {
  let params = new HttpParams()
    .append('input', location)
    .append('language', navigator.language)
    .append('key', environment.googlePlacesApiKey);

  if (position) {
    params = params.append('location', `${position.coords.latitude},${position.coords.longitude}`);
  }

  return this.http.get(GOOGLE_API_URL, { params });
}

And this is the call as seen in the network tab on the developer tools:

enter image description here

Any idea on how to avoid that?

Elias Garcia
  • 5,462
  • 9
  • 28
  • 54
  • That screenshot shows that the response indeed *doesn't* have that header. So that's probably why. – jonrsharpe Jan 02 '18 at 19:47
  • Hi @jonrsharpe ! The responsibility to send that header is not from the server? – Elias Garcia Jan 02 '18 at 19:49
  • Yes, the server has to set that header. In this case you don't control it, I guess. Also your token is visible, so you should refresh it. – jonrsharpe Jan 02 '18 at 19:50
  • You can’t mix in use of Ajax stuff like `http.get` with Places API endpoints. Places doesn’t support CORS, so that’s not gonna work. The only supported way to uses Places is as shown in the Places documentation. See https://stackoverflow.com/questions/43443836/angular-cors-jsonp-and-google-maps-http-api-calls/43444274#43444274 and https://stackoverflow.com/questions/44336773/google-maps-api-no-access-control-allow-origin-header-is-present-on-the-reque/44339169#44339169 – sideshowbarker Jan 03 '18 at 00:36
  • @EliasGarcia Have you considered using `import { AgmCoreModule } from '@agm/core';`? I have google autocomplete working using this in prod atm. – Z. Bagley Jan 03 '18 at 01:48
  • That's not true @sideshowbarker . As you can read in the Places API docs: `The Google Places API Web Service is a service that returns information about the sites, defined in this API as establishments, geographical locations or important points of interest, through the use of HTTP requests.`. Also, my request is working perfectly and I'm getting the results. The only error is with the pre flight request. – Elias Garcia Jan 03 '18 at 02:41
  • I don't want to use third party libraries like that @Z.Bagley but I didn't encounter a solution, so finally I'm just using the JS client library by Google but I don't like that solution so much... – Elias Garcia Jan 03 '18 at 02:43
  • Your request isn’t working perfectly. Your browser isn’t even *sending* your request to begin with. Instead your browser is automatically on its own sending only a preflight OPTIONS request, and the response for that is what’s shown in the screenshots in the question. And the maps.googleapis.com server is sending back a 200 OK status code in that response *but because the response doesn’t have the Access-Control-Allow-Origin header, the preflight fails* and your browser stops right there and never moves on to even trying your actual request. That’s the way the same-origin policy and CORS work – sideshowbarker Jan 03 '18 at 03:14
  • Yes, I know how CORS work @sideshowbarker . But if I click in the `Response` tab of the Chrome developer console I get the autocomplete suggestions coming back from the server in JSON format. All is working perfectly but I don't understand why because the request can't be sent in theory. – Elias Garcia Jan 03 '18 at 03:22

0 Answers0