问无法访问样式表CORS的cssRules
EN

Stack Overflow用户

提问于 2022-03-02 17:58:55

回答 2查看 2.1K关注 0票数 0

因此，我一直读到，您不能访问外部样式表的cssRules，因为它会遇到CORS策略问题。

我决定采取一种不同的方法，但我仍然遇到一些问题。

我的方法：

purposes

Delete

下载后端的css文件，并将它们上传到S3 Bucket

，返回匹配现有link标记的现有链接和新链接，并添加一个新标记，指向我的CDN

Access document.styleSheets
Tadaaaa (但失败)

我想弄明白的是，如果我的CDN允许任何来源的访问，为什么我仍然会遇到问题呢？

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])
  })
}