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 'https://maps.googleapis.com/maps/api/place/textsearch/json?query=best+Restaurants+Berlin&key=XXXXXXXXXX' from origin 'https://flamboyant-brahmagupta-e2da96.netlify.app' 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": "https://maps.googleapis.com/maps/api"
When i deployed the app with the proxy, it shows this error:
GET https://flamboyant-brahmagupta-e2da96.netlify.app/place/textsearch/json?query=best+Restaurants+Berlin&key=XXXXXXXXXX 404
So I removed the proxy and put the base url in my react code:
const baseUrl = 'https://maps.googleapis.com/maps/api' 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:
[build] base = "frontend" [[redirects]] from = "/place/*" to = "https://maps.googleapis.com/maps/api/place/:splat" status = 200 force = true headers = {Access-Control-Allow-Origin = "*"} [[headers]] # Define which paths this specific [[headers]] block will cover. for = "/*" [headers.values] Access-Control-Allow-Origin = "*"
Still no success 
Please help me out 
My setup:
- client (Create-react-app) deployed on Netlify - https://flamboyant-brahmagupta-e2da96.netlify.app
- server deployed on Herouku
My file structure:
