Can't use Google maps API because of CORS policy

Design help Custom code
1

I’m trying to make a javascript ajax request in my custom code to the following URL:
https://maps.googleapis.com/maps/api/place/details/json?place_id=ChIJAyo2xqlIDW0R3nai2UjqRJU&fields=user_ratings_total&key=MY_API_KEY

But I’m getting the following JS error:
Access to XMLHttpRequest from origin ‘https://www.malcolmpacific.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

There are no restrictions set on my API key so I thought WebFlow may be restricting these requests so I contacted support but they said they are not and I should ask here.

Does anyone know how to fix this error on WebFlow?

2

Hi Stuart, it has nothing to do with Webflow-

Different APIs have different security restrictions, you’ll need to check Google’s API docs for the endpoint you want. I remember in the Google Cloud provisioning interface, certain endpoints allow you to configure them for direct access by a browser, and then restrict by referrer domain, IP, etc.

Best guess is that either the API you’re using does not support browser access, or you haven’t configured it that way, or you’re using the wrong URL formation for the access approach you’re wanting to use.

When you see a CORS error it means that the resource you’re trying to access is not setup to permit access by a browser. In cases where you do want to access that type of resource, you’d build a middle tier using something like a serverless function. I do this for example for Google’s YouTube APIs when I need to pull playlist data dynamically into a Webflow site.

1 Like