Sending a details request to Google Places API - (CORS error)

Question

I'm trying to augment the collection of photos I have for public artworks in this project I'm working on with photos from the Google Places API. It says here that you can send a details request to get an array of ten photos. Eventually I will unpack the response to get Google's photo reference for each photo and make requests for each photo in the array and display it.

Unfortunately, this plan breaks when I send my details request. This is the exact error I'm getting:

Fetch API cannot load https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJ5zf5lfXKRIYR8rPafbwaL68&key=MY_API_KEY. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:4040' is therefore not allowed access. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I'm running this from my localhost and I'm pretty sure that matters. All of my other API calls (Google Maps API and a couple others) are written exactly as this is, so I'm a little confused why I'm getting the error. Here is the relevant code:

The actual API call:

export function getPhotos(placeID) {
  let obj = {
    method: 'GET'
  };
  return fetch('https://maps.googleapis.com/maps/api/place/details/json?placeid=' + placeID + '&key=MY_API_KEY')
    .then((response) => {
      if (response.status >= 400){
        throw new Error("Error getting photos for placeID: " + placeID)
      }
      return response.json()
    })
}

Let me know if you need any other information, I'd be happy to provide it. Thanks!

Solution 1

You need to use a server side proxy to prevent this error. It works when you access the url directly because you have no origin when you do that.

• JS AJAX request to local server -> remote server, request received, response sent, remote server -> local server -> AJAX request to JS.

Check this related SO question:

• What to do when an API doesn't allow Access-Control-Allow-Origin
• webpack dev server CORS issue

You can either modify your API server so that CORS is enabled, or follow the instructions on the webpack-dev-server page under "Combining with an existing server" to combine asset serving with webpack-dev-server and your own API server.

• How do I make a CORS request with fetch on my localhost?

Hope this helps!

Solution 2

The previous answer suggests using a server-side proxy. While that is a good solution for the general case of accessing a web API that does not support CORS or JSONP, it's not the best solution for this specific problem.

Instead, use Google's JavaScript Places Library which is designed specifically for this kind of use. The links at the top of that page provide additional samples, guides, and reference material.

Solution 3

I raised a similar question which got closed:-
React - development server,"cors" issues using https url to retrieve data from api

I had the exact same issue using the google api from my localhost. After a painful day of trying various things the solution was incredibly simple.

I added the Allow CORS: Access-Control-Allow-Origin chrome extension, whitelisted the api and turned CORs on. This is a very old question and the solution might not have been viable at the time but I hope it helps someone some day!

Comments

[Nick Barrett]

I still get cors errors even when using the places library on localhost.

[sandy]

This was really helpful. I got a direction.Either I can create a NodeJS server and request the Places API and send the response from nodeJS to my frontend app or use Place library in my frontend app. I still didn't solve the issue rather working on this. But after seeing this answer, I found in the Google places API documentation at the top it is clearly written that to develop a client side application one must use the JavaScript places library than places API.

[naveenraina]

we can not keep adding extensions for something to work on a browser. How will an end user know about an extension to make your web page work?