On our site loads a payment form in an iframe hosted by another service. The service allows us to supply custom fonts and CSS to the payment form via @import and @font-face.
I’ve tried doing this, but:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.fortomorrow.eu/assets/common/font/CentraNo2-Medium.woff2. (Reason: CORS header 'Access-Control-Allow-Origin' does not match 'secure.fundraisingbox.com').
I’ve already added the following to our netlify.toml:
[[headers]]
for = "*"
[headers.values]
Access-Control-Allow-Origin = "secure.fundraisingbox.com"
I guess I’ve made syntax error? How would I allow this other website to load assets from our site at Netlify? I wouldn’t want to allow all sites to hot link our assets.
To make debugging easier, I’ve set up this Codepen.
I’ve changed my netlify.toml to include this instead of the previous headers:
[[headers]]
for = "/*"
[headers.values]
Access-Control-Allow-Origin = "https://codepen.io/kslstn/pen/zYyzqKj"
I saw some examples with ‘https’ in the value for Access-Control-Allow-Origin and some without. I’m also not sure if wild cards are allowed or necessary for the path. That’s why I included the full path. Oddly (even in fullscreen mode, where the URL is exactly the one in the setting), the errors say things like:
Now I’m still trying to wrap my head around CORS, but isn’t that a weird error considering that ‘Access-Control-Allow-Origin’ equals ‘https://codepen.io/kslstn/pen/zYyzqKj’?
Hi, @Koooos. Our support team can assist you with creating header rules if there are questions about how to do so. What we cannot assist you with is determining what headers are the correct headers to create. We need you to tell us that information and not the other way around.
Our support team is here to provide technical support for Netlify’s services and the code we write. Determining what the correct CORS headers should be for you site is something specific to your site and the code you write. For this reason, our support team cannot tell you what the correct of best CORS header should be.
To summarize, we can assist with questions about how to create these headers on Netlify but you need to tell us what headers you want to make.
Now, someone else on this support forum may have the resources to answer the question about what CORS headers you should create so you are free to ask that question here. I just wanted to be clear what our support team can and cannot do to assist here.