Access-Control-Allow-Origin Policy

Thanks @perry !! Much appreicated

time has passed. When I invoke ntl dev with fetch('http://localhost/.netlify/functions/..'), there is no cors error, but with fetch('') I get the cors error. I use this app as client.

My netlify.toml has the standard entry
[[headers]] for = "/*" [headers.values] Access-Control-Allow-Origin = "*".

Error is:
Access to fetch at '' from origin 'http://localhost:3000' - respectively - 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..
Client Code, see line 4 and 5.
server code netlify, lines 20 and 62
issue with remote fetch, but probably not related to this
Any help?

Any specific reason why you’re hardcoding your site’s URL:

instead of using relative URLs like fetch(./netlify/functions/whatever)?

I want to address another server, so tik2.. is the destiny and the code you found is the origin. Understood?

Then simply set access control headers in your serverless function.

return {
  headers: {
    'access-control-allow-origin': '*'

I have in netlify.toml:
[[headers]] for = "/*" [headers.values] Access-Control-Allow-Origin = "*"

Can you try and make a local request to the mongo.ts function on like:
var coll='index'; export async function find(coll: string) { var res = await (await fetch('' + coll)).json();console.log(1, res)}
Doing this from local does not work, I get:
errorType: 'SyntaxError', errorMessage: 'Unexpected end of JSON input',

I just deployed t– and mongo here does not work if you look in the console.
I have an open issue.

Hey there,

I think we need a bit more info before we can assist further.

Can you elaborate on why you’re hardcoding your site’s URL? What is your use case? We believe this may be impacting the issue.

@hillary Please see my answer before: is cors origin with netlify.toml:Access-Control-Allow-Origin Policy - #50 by tik9

Headers in _header or netlify.toml configuration files don’t apply to functions. If you want/need to add CORS headers to a function, you need to add them in the function as per

1 Like

@coelmay can you check ? I again fight against cors if you look in the console. This time, the sys function seems to be wrong regarding cors but it returns the cors header in code. Did I miss something?

You missed the spelling mistake in the header

Your header top, correct header bottom

headers: { 'access-control-allow-orgigin': '*' },
headers: { 'access-control-allow-origin': '*' },
1 Like

I’m trying to access a WebGL game file from AWS to play on my React site.

It works on local but when I push to netlify I’m getting CORS warnings.

I have tried the * in the header but realized that is for files on the same domain (Spoiler, it didn’t work)

I have now switched to “*” because this file is from a different domain. It is still not working, I have tried .toml and _headers (see screenshot)

Hi, @NFT. Our support team doesn’t have the resources to debug the site configuration to find the correct Access-Control headers to create to prevent this error. That is not covered in the scope of our support.

However, if you tell us the header you want to create, we can assist with that. We will help you to create headers. We will not examine the API use to determine what the correct headers should be. We need you to tell use what the correct Access-Control headers should be. I just wanted to be clear what our support team will and will not assist with.

You are welcome to ask this question here and someone else on the support forum might answers.

If you know the header you want to create and the header itself isn’t working, please let us know and our support team will assist with that. (Please share the site subdomain or the site API ID.)

I just noticed that the CSS stylesheet I have on my Hugo site seems to produce a No ‘Access-Control-Allow-Origin’ CORS error when requested from a different origin (say, Google Translate), but other assets are handled just fine.

I tried setting the following configuration in my netlify.toml (and made sure it was that that I was using):

  from = "/assets"
  to = "*"
  status = 200
  force = true
  headers = {X-From = "Netlify"}

  from = "/assets/*"
    Access-Control-Allow-Origin = "*"

I also tried setting the from of the headers block to /*, but it didn’t work. And it can’t find the response data to look for errors.

I don’t think Hugo is capable of adding HTTP headers other than when using the development server, and I don’t have anything else that handles it other than Netlify. But the stylesheet is generated from transpiling SASS… Is it possible that it’s not having the header assigned?

As your deploy logs says, there are no header rules for your deploy:

Thanks for the insight! There was a problem with the indentations in my netlify.toml file, and skipped reading the header information:

  package = "netlify-plugin-cypress"

  enable = false
  [plugins.inputs.postBuild] # This should be indentated!
    enable = true

After that, all my headers are being applied correctly now.

Hi guys. I bothered some days. I did every thing in this post, but didn’t work. How can you help me please?

Hi @AndrewAmiri,

What steps did you take and can you please share your site name?

Hi SamO,
Thanks for your reply.

I am new to Netlify.
1- I added a new site to our Netlify account which is named papaya-blini-a3fc70.
My website is a Vue application that will be available on My APIs are in On the login page, is called which raises cors error.

2- I edit the toml file as follows:

from = “/"
to = “/index.html”
from = "/api/

to = “
status = 200
for = “/"
Access-Control-Allow-Origin = "

but I got the same error.
3- I added _header file which contains ‘Access-Control-Allow-Origin = “*”’, but the error exists again.
4- I try to search and read forums in netlify but I couldn’t found any thing more.

I will be very thankful if you can help me.

With regards

Hi Netlify,
For more details, Let me say clearly:
I have 2 websites and The second is new and I added it to be used as a staging environment. Both are on GitHub but in different accounts but with the same repository files.
The first is OK and works properly.
The second has a Cors error when trying to log in.
I checked the header of and for the login API call.
This is the header of reqquest, which is OK:


  1. Request URL:

  2. Request Method:


  3. Status Code:


  4. Remote Address:

  5. Referrer Policy:



  1. :authority:

  2. :method:


  3. :path:


  4. :scheme:


  5. accept:

    application/json, text/plain, /

  6. accept-encoding:

    gzip, deflate, br

  7. accept-language:


  8. cache-control:


  9. content-length:


  10. content-type:


  11. origin:

  12. pragma:


  13. referer:

  14. sec-ch-ua:

    “Not?A_Brand”;v=“8”, “Chromium”;v=“108”, “Google Chrome”;v=“108”

  15. sec-ch-ua-mobile:


  16. sec-ch-ua-platform:


  17. sec-fetch-dest:


  18. sec-fetch-mode:


  19. sec-fetch-site:


  20. user-agent:

    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

And this is the header of the second which raises cors error:


  1. Request URL:

  2. Referrer Policy:


  3. Request Headers

  4. Provisional headers are shown
    Learn more

  5. Accept:

    application/json, text/plain, /

  6. Cache-Control:


  7. Content-Type:


  8. Pragma:


  9. Referer:

  10. sec-ch-ua:

    “Not?A_Brand”;v=“8”, “Chromium”;v=“108”, “Google Chrome”;v=“108”

  11. sec-ch-ua-mobile:


  12. sec-ch-ua-platform:


  13. User-Agent:

    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

I couldn’t find how and why the headers are different.
I couldn’t find out if I must do anything in Cloudflare.

Can anyone help me, please?