无法访问样式表 CORS 的 cssRules

发布于 2025-01-11 05:58:37 字数 1851 浏览 0 评论 0原文

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

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

我的方法：

在后端下载 css 文件并将其上传到 S3 存储桶
返回现有链接和新链接以进行匹配
删除现有 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: 不允许访问跨域样式表

我有看到这个链接无法在 Chrome 64 中从本地 css 文件访问 cssRules

网络选项卡的结果

原文

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

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

分享到QQ

分享到微博