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.
[[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.
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.
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.
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.
