So I've been reading that you can't access cssRules for external stylesheets because it runs into CORS policy issues.

I decided to take a different approach but I'm still running into issues.

My Approach:

1. Download the css files on the backend and upload them to S3 Bucket
2. Return back a existing link and new link for match purposes
3. Delete existing link tag and add in a new tag that will point to my CDN
4. Access document.styleSheets
5. Tadaaaa (but this fails)

What I'm trying to figure out is why am I still running into issues if my CDN allows access from any origin?

export default () => {
  const payload = [...document.styleSheets].filter(s => s.href).map(s => s.href);

  axios.post('SOME ENDPOINT', { css: payload }).then(({ status, data: { data: newLinks } }) => {
    if (status === 200) {
      for (const i in newLinks) {
        document.querySelector(`link[href="${newLinks[i].source}"]`).remove()
        const stylesheet = document.createElement('link');
        stylesheet.rel = 'stylesheet';
        stylesheet.href = newLinks[i].downloaded;
        document.getElementsByTagName('head')[0].appendChild(stylesheet);
      }
    }
  }).then(() => {
    let delay = 250
    setTimeout(() => {
      console.log('Stylesheets with Removed Links', [...document.styleSheets]);
    }, delay)
  }).then(() => {
    console.log([...document.styleSheets])
  })
}

Error on Safari SecurityError: Not allowed to access cross-origin stylesheet

I have seen this link Cannot access cssRules from local css file in Chrome 64

Result From Network Tab