无法访问样式表 CORS 的 cssRules

Question

所以我一直在读到您无法访问 css 外部样式表的规则，因为它遇到了 CORS 策略问题。

我决定采取不同的方法，但我仍然运行遇到问题。

我的方法：

在后台下载css个文件并上传到S3 Bucket
Return 支持现有的 link 和新的 link 用于匹配目的
删除现有的 link 标签并添加一个指向我的 CDN 的新标签
访问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])
  })
}

Safari 上的错误SecurityError: Not allowed to access cross-origin stylesheet

我看过这个link

网络选项卡的结果

Answer 1

我最终找到了解决方案...

在此感谢 Paulo Belo link

stylesheet.crossOrigin = "anonymous" 解决了我的问题，让我可以访问 cssRules。

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin

请注意，此修复不适用于引发此错误的现有样式表。

Exception: DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules at CSSStyleSheet.s

此修复仅适用于您自己上传的工作表，或者在我的情况下是来自我的 CDN 的工作表。

无法访问样式表 CORS 的 cssRules

Cannot Access cssRules for Stylesheet CORS

javascript

css

amazon-s3

cors

cdn