Javascript sheet.cssRules在内部页面上抛出错误，但在主页上工作正常

我正在Wordpress站点的自定义javascript中使用此函数

var addRule = (function (sheet) {
    if(!sheet) return;
    return function (selector, styles) {
        console.log(sheet.cssRules)
        if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
        if (sheet.addRule) return sheet.addRule(selector, styles);
    }
}(document.styleSheets[document.styleSheets.length - 1]));

这里的问题是上面的功能在主页上运行良好，但是

抛出未捕获的DomeException:未能从“CSSStyleSheet”读取“cssRules”属性：无法访问内部页面上的规则

这是我网站的链接

//在控制台中，您不会看到任何错误

//这里您将在控制台中看到一个错误

根据我的研究，这个错误是由跨源资源共享（CORS）引起的，

---

但是为什么它能在首页上工作呢？

如果没有你，它就不能工作，包括sheet.cssRule前面的“./”。只需继续计算内部文件的深度，并添加“./”以精确等于该值

---

编写类似“../../../../sheet.cssRule”的内容而不是“sheet.cssRule”应该可以解决问题

我知道当我们比较这两个页面并尝试在脚本中使用（；）分号关闭console.log时，您的代码是绝对正确的

console.log(sheet.cssRules);

---

毫无疑问，这个问题是由CORS引起的。我建议您访问

console.log（document.styleSheets）

并查看元素的

href

，以检查哪个样式表被传递到您的addrule（）。执行此操作后

document.styleSheets.length-1

，样式表的href应该与您的域相同