No 'Access-Control-Allow-Origin' header

Preview site:
https://5ebc380acf386c0006d39065--core-ds-components.netlify.app/

Console Error:
Access to script at 'https://d33wubrfki0l68.cloudfront.net/js/e903370b0096a53f43fcbbdb1fc939ac3b7667aa/build/p-4e79966c.js' from origin 'https://5ebc380acf386c0006d39065--core-ds-components.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

No build issues.

I searched around and tried adding this netlify.toml file to the root, with no changes unfortunately:

[[headers]]
for = "/*"
[headers.values]
Access-Control-Allow-Origin = "*"

Is this a cloudfront header issue? I’m at a loss on where to go for resolution…

Yup - that is saying that cloudfront doesn’t have your custom header which is true! I think you’re using asset optimization on the site, and that will clash with custom headers - we can’t set them on those resources. So, you could turn off that feature in your build and deploy settings and that would remove the problem.

1 Like