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 ?
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.
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.
The Same Origin Policy (SOP) is the policy browsers implement to prevent vulnerabilities via Cross Site Scripting (XSS). In other words, the browser would not allow any site to make a request to any other site. It would prevent different origins from interacting with each other through such requests, like AJAX. This policy exists because it is too easy to inject a link to a javascript file that is on a different domain. This is a security risk - you really only want code that comes from the site you are on to execute and not just any code that is out there.
The Cross Origin Resource Sharing (CORS) is one of the few techniques for relaxing the SOP. Because SOP is “on” by default, setting CORS at the server-side will allow a request to be sent to the server via an XMLHttpRequest even if the request was sent from a different domain. This becomes useful if your server was intended to serve requests from other domains (e.g. if you are providing an API).
JSON with Padding is just a way to circumvent same-origin policy, when CORS is not an option. This is risky and a bad practice. Avoid using this.
If you want to bypass that restriction when fetching the contents with fetch API or XMLHttpRequest in javascript, you can use a proxy server so that it sets the header Access-Control-Allow-Origin to *.
If you need to enable CORS on the server in case of localhost, you need to have the following on request header.
Access-Control-Allow-Origin: http://localhost:9999
