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:
- Download the css files on the backend and upload them to S3 Bucket
- Return back a existing link and new link for match purposes
- Delete existing
linktag and add in a new tag that will point to my CDN - Access
document.styleSheets - 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])
})
}
I have seen this link Cannot access cssRules from local css file in Chrome 64
