Google Place API blocked by CORS policy

What I’m trying to do: Access Google Place API from my Netlify app (Create-react-app)
My problem: I’m getting CORS error:

(index):1 Access to fetch at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Background: Before I deployed it on Netlify, my local host was able to access the Google Place API without issue. I was using a proxy in package.json:

"proxy": ""

When i deployed the app with the proxy, it shows this error:

GET 404

So I removed the proxy and put the base url in my react code:

const baseUrl = ''
const response = await fetch(`${baseUrl}/place/textsearch/json?query=best+${categories[i]}+${city}&key=${googlePlacesApi}`);
const extraSuggestions = await response.json();

That’s when I encountered the CORS Error (shown right at the top^)
So, I looked through other similar posts and configured my netlify.toml as such:

  base = "frontend"

from = "/place/*"
to = ""
status = 200
force = true
headers = {Access-Control-Allow-Origin = "*"}

  # Define which paths this specific [[headers]] block will cover.
  for = "/*"
  Access-Control-Allow-Origin = "*"

Still no success :confused: Please help me out :frowning:

My setup:

My file structure:
Screenshot 2020-05-10 at 17.27.29

Hi, @wen, and welcome to the Netlify community site.

The best answer I have found for this is here:

This issue doesn’t appear to be Netlify specific but a known requirement when working with Google’s APIs.

Please take a look at that guide and it will hopefully provide a solution.