# CORS issue blocks Maps auto complete API request **URL:** \ **Category:** Support\ **Tags:** building, cors, netlify-newbie\ **Created:** [January 1, 2022, 7:06pm UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406 "2022-01-01T19:06:50Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![Siddharth](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/siddharth/32/32743_2.png) [@Siddharth](https://answers.netlify.com/u/Siddharth)\ **Post date:** [January 1, 2022, 7:06pm UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/1 "2022-01-01T19:06:50Z")
Access to fetch at ‘[https://maps.googleapis.com/maps/api/place/queryautocomplete/json](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](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 ---
**Author:** ![coelmay](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/coelmay/32/24427_2.png) [@coelmay](https://answers.netlify.com/u/coelmay)\ **Post date:** [January 1, 2022, 8:48pm UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/2 "2022-01-01T20:48:53Z")
Hi @Siddharth Welcome to the forums You can use a `netlify.toml` or a `_headers` file as outlined in the [Custom headers](https://docs.netlify.com/routing/headers/) documentation. Also check out [Cross-Origin Resource Sharing (CORS) - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) and [Access-Control-Allow-Origin - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin). ---
**Author:** ![Siddharth](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/siddharth/32/32743_2.png) [@Siddharth](https://answers.netlify.com/u/Siddharth)\ **Post date:** [January 2, 2022, 12:53am UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/3 "2022-01-02T00:53:39Z")
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. ---
**Author:** ![coelmay](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/coelmay/32/24427_2.png) [@coelmay](https://answers.netlify.com/u/coelmay)\ **Post date:** [January 2, 2022, 1:43am UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/4 "2022-01-02T01:43:09Z")
As mentioned in the headers documentation for a `_headers` file the format is ```auto /* 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 ```auto [[headers]] for = "/*" [headers.values] cache-control = ''' max-age=0, no-cache, no-store, must-revalidate''' ``` which in both case renders the header as ```auto 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 ```auto /* Access-Control-Allow-Origin: * ``` or ```auto [[headers]] for = "/*" [header.values] Access-Control-Allow-Origin = "*" ``` ---
**Author:** ![Siddharth](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/siddharth/32/32743_2.png) [@Siddharth](https://answers.netlify.com/u/Siddharth)\ **Post date:** [January 2, 2022, 4:28pm UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/5 "2022-01-02T16:28:50Z")
Thanks for your detailed answer but sadly I think i am doing something wrong hers my toml file content ```auto [[headers]] for = "/*" [headers.values] cache-control = ''' max-age=0, no-cache, no-store, must-revalidate''' ``` didn’t worked so i tried ```auto [[headers]] for = "/*" [header.values] Access-Control-Allow-Origin = "*" ``` didn’t worked so i tried this one ```auto # 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. ---
**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\ **Post date:** [January 2, 2022, 4:43pm UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/6 "2022-01-02T16:43:24Z")
To fix CORS errors returned by external API (in your case, `maps.googleapis.com`), you need to use proxy rewrites: > **[Rewrites and proxies](https://docs.netlify.com/routing/redirects/rewrites-proxies/#proxy-to-another-service)** > > Use rewrite rules to fetch a location behind the scenes while the URL in the visitor’s address bar remains the same. Proxy to another service or site. You can remove the headers as they won’t be of use here. ---
**Author:** ![Siddharth](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/siddharth/32/32743_2.png) [@Siddharth](https://answers.netlify.com/u/Siddharth)\ **Post date:** [January 2, 2022, 4:54pm UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/7 "2022-01-02T16:54:30Z")
proxy rewrites: ```auto /api/* https://api.example.com/:splat 200 ``` where shall i put [maps.googleapis.com/request](http://maps.googleapis.com/request) ```auto 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](https://api.example.com) and api/ in my case thanks a lot again ---
**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\ **Post date:** [January 2, 2022, 4:56pm UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/8 "2022-01-02T16:56:59Z")
Here you go: ```auto /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`. ---
**Author:** ![Siddharth](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/siddharth/32/32743_2.png) [@Siddharth](https://answers.netlify.com/u/Siddharth)\ **Post date:** [January 2, 2022, 4:58pm UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/9 "2022-01-02T16:58:52Z")
> [@hrishikesh](#): > > `/api/* https://maps.googleapis.com/:splat 200` And this command should be in toml file ? ---
**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\ **Post date:** [January 2, 2022, 4:59pm UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/10 "2022-01-02T16:59:41Z")
No, the `_redirects` file. ---
**Author:** ![Siddharth](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/siddharth/32/32743_2.png) [@Siddharth](https://answers.netlify.com/u/Siddharth)\ **Post date:** [January 2, 2022, 5:01pm UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/11 "2022-01-02T17:01:30Z")
when i create a redirect file on my pc to upload in netlify, it has txt extension, and i cant remove it ---
**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\ **Post date:** [January 2, 2022, 5:02pm UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/12 "2022-01-02T17:02:23Z")
Change your settings to view file extensions: > **[View File Extensions (Windows 10)](https://vtcri.kayako.com/article/296-view-file-extensions-windows-10)** > > In order to avoid confusion regarding your saved files, you may want > to configure Windows to show al... Then remove the extension by renaming it. ---
**Author:** ![Siddharth](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/siddharth/32/32743_2.png) [@Siddharth](https://answers.netlify.com/u/Siddharth)\ **Post date:** [January 2, 2022, 6:26pm UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/13 "2022-01-02T18:26:33Z")
```auto 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/](https://goeapp.netlify.app/page.page5/) ---
**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\ **Post date:** [January 2, 2022, 6:29pm UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/14 "2022-01-02T18:29:01Z")
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: ![image](https://global.discourse-cdn.com/netlify/original/3X/8/1/81ffb5023b6fe0f5bef48aeb831eae1f314d97b8.png) Use it in the frontend how you want to. ---
**Author:** ![Siddharth](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/siddharth/32/32743_2.png) [@Siddharth](https://answers.netlify.com/u/Siddharth)\ **Post date:** [January 2, 2022, 6:53pm UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/15 "2022-01-02T18:53:45Z")
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 ? ---
**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\ **Post date:** [January 2, 2022, 7:07pm UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/16 "2022-01-02T19:07:07Z")
> [@Siddharth](#): > > Was the response from the netlify website starting with the Google geo url ? If you’re talking about this: ![image](https://global.discourse-cdn.com/netlify/original/3X/f/a/fa4146b49db493d09db13d11e5d51c44331250df.png) 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. ---
**Author:** ![jefryarch](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@jefryarch](https://answers.netlify.com/u/jefryarch)\ **Post date:** [May 10, 2022, 3:03pm UTC](https://answers.netlify.com/t/cors-issue-blocks-maps-auto-complete-api-request/49406/17 "2022-05-10T15:03:29Z")
> [@Siddharth](#): > > CORS policy: No ‘Access-Control-Allow-Origin’ 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](http://net-informations.com/js/default.htm), 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`