CORS Error on Google Places API but not Reddit

Question

I am trying to make an api call (Google Places API). However I keep getting the following error

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=Seoul&inputtype=textquery&fields=photos,formatted_address,name,rating,opening_hours,geometry&key=--snip--' from origin 'http://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

using the following code:

  getRemoteData() {
    this.http

      .get(
        "https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=Seoul&inputtype=textquery&fields=photos,formatted_address,name,rating,opening_hours,geometry&key=--snip--"
      )
      .map(res => res)
      .subscribe(data => {
        console.log(data);
      });
  }

However if I replace the url with https://www.reddit.com/r/gifs/top/.json?limit=105sort=hot

it works fine. Why is that so? How can I fix it?

Answer 1

This is a duplicate of another question: https://stackoverflow.com/a/42182716/1152102

This is because you are using the wrong api, intended for server use.

CORS policies protect the users of the server, preventing the browser from sending unauthorized requests with the user's credentials to the server.