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.
Iâm experiencing the same error and I donât quite understand the solution. Are you saying that weâre unable to use the asset optimization plugin at all currently?
I donât know what plugin you refer to; I am talking about the not-a-build-plugin feature in your deploy settings page titled asset optimization:
This feature will NOT allow you to set custom headers on any assets optimized (which you cannot individually control), nor will it work with our large media service.
It is something you can implement yourself in a way that doesnât clash with those services; there are dozens of html/css/js minifiers (for instance, many are described in these threads: Human verification - Stack Overflow), which will do at least a good a job as our built-in facility, AND allow you much more control over which assets they bundle/minify, so thatâs my recommendation if you need bundling/minification for today AND you require our custom headers or large media to work.
Ok yes, thatâs what I wanted to know. I also experienced some CORS-related errors when switching on the asset optimization. I will use my own asset optimization pipeline then. Thanks fool!
The error message âNo âAccess-Control-Allow-Originâ header is present on the requested resourceâ typically occurs in web development when you are trying to make a cross-origin XMLHttpRequest (XHR) or fetch request, but the server hosting the requested resource doesnât include the necessary CORS (Cross-Origin Resource Sharing) headers to allow the request from a different origin (domain). To fix this, you need to configure the server to include the âAccess-Control-Allow-Originâ header in its response with the appropriate origin value, which can be a specific domain or â" to allow requests from any origin. For example, in Node.js with Express, you can set the header like this: res.header(âAccess-Control-Allow-Originâ, "â); Ensure that you also handle other CORS headers and methods as needed, depending on your specific use case and security requirements.
