Home
Support Forums

CORS issue blocks Maps auto complete API request

Access to fetch at ‘https://maps.googleapis.com/maps/api/place/queryautocomplete/json? location=22.72%2C88.34&key=mykeyhere&radius=500&input=ccu’ from origin ‘https://goeapp.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.

I am using Manual deploy method and don’t have any experience in npm so how can fix this issue ?

I searched the forum and got to know that including a .toml file will do the job, but I don’t know how to do it, need guidance.

Thanks

Hi @Siddharth

Welcome to the forums

You can use a netlify.toml or a _headers file as outlined in the Custom headers documentation.

Also check out Cross-Origin Resource Sharing (CORS) - HTTP | MDN and Access-Control-Allow-Origin - HTTP | MDN.

1 Like

Hmm, looks like I am totally confused, I am thinking of using headers or toml but can’t understand which syntax and code shall I put in the file.

As mentioned in the headers documentation for a _headers file the format is

/*
  cache-control: max-age=0
  cache-control: no-cache
  cache-control: no-store
  cache-control: must-revalidate

whereas for a netlify.toml file the format is

[[headers]]
  for = "/*"
  [headers.values]
	cache-control = '''
	max-age=0,
	no-cache,
	no-store,
	must-revalidate'''

which in both case renders the header as

cache-control: max-age=0,no-cache,no-store,must-revalidate

So when looking at the Access-Control-Allow-Origin header you might have something like

/*
  Access-Control-Allow-Origin: *

or

[[headers]]
  for = "/*"
  [header.values]
    Access-Control-Allow-Origin = "*"

Thanks for your detailed answer but sadly I think i am doing something wrong
hers my toml file content

[[headers]]
  for = "/*"
  [headers.values]
	cache-control = '''
	max-age=0,
	no-cache,
	no-store,
	must-revalidate'''

didn’t worked so i tried

[[headers]]
  for = "/*"
  [header.values]
    Access-Control-Allow-Origin = "*"

didn’t worked so i tried this one

# The following redirect is intended for use with most SPAs that handle
# routing internally.
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

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

these were the inputs i used one by one none worked and i got cors again and again,
should i have to replace any value with * ?

when i tried to create a header file it always saved on my pc with txt extension.
please suggest me where i am wrong.

To fix CORS errors returned by external API (in your case, maps.googleapis.com), you need to use proxy rewrites:

You can remove the headers as they won’t be of use here.

1 Like

proxy rewrites:

/api/*  https://api.example.com/:splat  200

where shall i put maps.googleapis.com/request

Now all requests to /api/... will be proxied through to https://api.example.com straight from our CDN servers without an additional connection from the browser.

what should be the value of https://api.example.com and api/ in my case

thanks a lot again

Here you go:

/api/* https://maps.googleapis.com/:splat 200

Now in your frontend code, make a request to /api/maps/api/place/queryautocomplete/json? location=22.72%2C88.34&key=mykeyhere&radius=500&input=ccu instead of maps.googleapis.com.

1 Like

And this command should be in toml file ?

No, the _redirects file.

1 Like

when i create a redirect file on my pc to upload in netlify, it has txt extension, and i cant remove it

Change your settings to view file extensions:

Then remove the extension by renaming it.

https://goeapp.netlify.app/api/maps/api/place/queryautocomplete/json?22.72%2C88.34/kol&key=&radius=500&input=ccu

its starting with the netlify domain /api is not being replaced with the url, redirect file was added successfully

https://goeapp.netlify.app/page.page5/

I don’t see what’s wrong then. That’s what was expected to happen.

You’re now getting the JSON data without any CORS errors:

Use it in the frontend how you want to.

1 Like

I am more grateful to you than you’ll ever know.:+1::+1:

Was the response from the netlify website starting with the Google geo url ?
Or you did the API call in the browser tab ?

If you’re talking about this:

Then, yes that’s the response from that URL. Netlify is proxying the request to that endpoint. So, when you call this URL /api/place/queryautocomplete/json?22.72%2C88.34/kol&key=&radius=500&input=ccu, it actually gets forwarded to https://maps.googleapis.com/maps/api/place/queryautocomplete/json? location=22.72%2C88.34&key=mykeyhere&radius=500&input=ccu. Netlify takes the response from there and passes it back to your frontend. And since the URL is being called on the same domain, browsers think it’s a same origin request while internally, Netlify is able to fetch the response from the destination.