将 Vuetify 依赖项添加到我的项目会导致 SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-or

Posted 2023-02-16

【中文标题】将 Vuetify 依赖项添加到我的项目会导致 SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet

【英文标题】：Adding Vuetify dependency to my project gives SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet

【发布时间】：2021-08-08 17:44:00

【问题描述】：

我想实现一个在新窗口中打开 CKEditor 组件的 Vue 应用程序。我使用this post 的方法成功实现了它。我还实现了一个 Codesandbox 来展示工作示例。

现在，当我使用 vue add vuetify 添加 vuetify 的依赖项时，CKEditor 窗口缺少 CSS，并且浏览器控制台（Chrome 或 Firefox）显示 CORS 错误：

[Vue warn]: Error in callback for watcher "open": "SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet"

（不幸的是，我无法将 vuetify 依赖项正确添加到我的 Codesandbox 中 - 一旦我添加了我的依赖项，我最终会出现编译错误。）

【参考方案1】：

经过进一步调查，事实证明，Vuetify 插入了两个对外部样式表的引用：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

在 window.open() 之后，调用函数 copyStyles() 将所有 CSS 转移到新窗口中。但是，由于两个外部 CSS 引用，document.stylesheet.cs-s-rules.get() 失败并出现 CORS 错误，并且由于这两个引用位于所有样式表的开头，因此 copyStyles() 函数终止并且新窗口丢失所有样式表。

为了避免这种情况并在新窗口中包含其他样式表，函数 copyStyles() 中的简单 try/catch 就足够了。