This was quite a head-scratcher, but I think I figured out why you have this issue.
Getting a CORS error here is very strange. Because the widget CSS is being loaded from the exact same domain as the parent, so why would you get a CORS error?
The reason is the iframe. Or specifically, how you configured the iframe.
iframes themselves are mostly fine. They work, but tend to get messy when done across different domains because browsers isolate data between main page and the iframe. But again, it’s the same domain, so it shouldn’t be an issue.
But there is one piece of configuration I didn’t know existed: the sandbox attribute. Looking on W3Schools, the very first item in the list regarding what the sandbox tag does is:
- treat the content as being from a unique origin
So that’s why you get the CORS error: that’s the result of the iframe sandboxing.
Not only does this create CORS issues, it can also cause problems with our browser validation system, because cookies aren’t shared between the parent and the iframe.
To fix this, you can choose to either disable sandboxing entirely, or if you do want to keep using sandboxing, you’ll probably need to enable allow-same-origin for the iframe (which I expect, but am not sure about, will fix it).