Access-Control-Allow-Origin Policy

hey @stalliw - i am not an expert on CORS, but are you setting the appropriate header?

Thanks all, this thread helped me get a Netlify function running with the correct headers.

It’s worth sharing that I was running into a Missing Allow Origin error that sent me down a CORS rabbit hole. What I later realized is that I had a syntax error when making the request :man_facepalming:. Don’t be like me and inspect your response for detailed error messages.

1 Like

Thanks for the response @perry. I am not explicitly setting the headers. I’m not sure how or where to do that. Should that be done in one of my .js files or in my Netlify acct?

hi @stalliw -

i’d recommend checking this doc out:

it contains some examples of how to set a Content-Security-Policy which should be able you to fine-tune that CORS response.

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('https://tik2.netlify.app/.netlify..') 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 'https://tik2.netlify.app/.netlify/functions/mongo?op=find&coll=index' from origin 'http://localhost:3000' - respectively tik9.herokuapp.com - 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:

https://github.com/tik9/tik/blob/main/public/index.js#L4

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 tik2.netlify.app like:
var coll='index'; export async function find(coll: string) { var res = await (await fetch('https://tik2.netlify.app/.netlify/functions/mongo?op=find&coll=' + 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–tik2.netlify.app 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:

tik2.netlify.app 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 https://tik9.herokuapp.com ? 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 “https://moonrock-webgl.s3.us-east-2.amazonaws.com/*” 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):

[[redirects]]
  from = "/assets"
  to = "https://yonic-corner.netlify.app/assets/*"
  status = 200
  force = true
  headers = {X-From = "Netlify"}

[[headers]]
  from = "/assets/*"
  [headers.values]
    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:

[[plugins]]
  package = "netlify-plugin-cypress"

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

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