document.styleSheets [x] .cssRules为null

Question

当我检查网站时，
我从document.styleSheets[x].cssRules

中看到了cssRules

但是，对于此网站stackoverflow.com，当我使用Chrome浏览器进行检查时，我看到document.styleSheets，但cssRules为空。

怎么可能这样？

Answer 1

那是因为样式表来自不同的域。某些浏览器（例如Chrome）通过抛出安全错误或将cssRules和ownerRule设置为null来实现严格的跨域策略来自不同的域...在您的情况下样式表来来自CDN

MDN引用CSSStyleSheet文档中的以下内容......

  

在某些浏览器中，如果从其他域加载样式表，   调用cssRules导致SecurityError。

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

Answer 2

要尝试绕过此问题，您可以在链接标记中添加 crossorigin="anonymous" 以防止出现错误。

更多信息在这里：

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

这将创建一个 potencial cors request，但服务器必须响应 Access-Control-Allow-Origin: * 或 Access-Control-Allow-Origin: <authorized-domain>。

您可以查看 here 以了解如何向您的服务器添加 CORS 支持。

有关 CORS 的更多信息，您可以阅读 this 和 this。