Así que he estado leyendo que no puede acceder a cssRules para hojas de estilo externas porque se encuentra con problemas de política de CORS.

Decidí adoptar un enfoque diferente, pero sigo teniendo problemas.

Mi acercamiento:

1. Descargue los archivos css en el backend y cárguelos en S3 Bucket
2. Devuelve un enlace existente y un nuevo enlace para fines de coincidencia
3. Elimine la etiqueta de link existente y agregue una nueva etiqueta que apunte a mi CDN
4. Acceder a document.styleSheets
5. Tadaaaa (pero esto falla)

Lo que estoy tratando de averiguar es por qué sigo teniendo problemas si mi CDN permite el acceso desde cualquier origen.

 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 en Safari SecurityError: Not allowed to access cross-origin stylesheet

He visto este enlace No puedo acceder a cssRules desde un archivo css local en Chrome 64

Resultado de la pestaña Red