时间戳

首页 > 解决方案 > Ace 编辑器中的 JSHint 工作人员在静态 HTML 页面上被阻止

javascript - Ace 编辑器中的 JSHint 工作人员在静态 HTML 页面上被阻止

问题描述

我尝试从计算机上的 HTML 文件加载Ace 编辑器（使用file:///协议）来编辑 JavaScript：

ace.edit("editor", {
    "mode": "ace/mode/javascript",
})

但是，CSP 会阻止 JSHint（Ace 默认实现）使用的工作程序。以下错误记录到控制台：

Content Security Policy: The page’s settings blocked the loading of a resource at blob:null/[...] (“worker-src”).

当我设置loadWorkerFromBlob为false：

ace.config.set("loadWorkerFromBlob", false)

产生了不同的错误：

Security Error: Content at file:///[...]/index.html may not load data from file:///[...]/ace/worker-javascript.js.

我试图绕过 CSP<meta http-equiv="Content-Security-Policy">但无济于事，搜索这个问题没有产生任何结果。

如何从本地 HTML 页面在 Ace 编辑器中使用 JSHint？

编辑：忘记指定这只是 Firefox 的问题。第一个示例在 Chromium 上对我来说完全没问题。

标签： javascriptcontent-security-policyace-editorjshint

解决方案

file://URL 产生一个Origin，如您在null错误消息中所见：

The page’s settings blocked the loading of a resource at blob:null/[...]

因此 CORS 不支持本地file://访问，请参见此处和此处。
此外，Chrome 不允许您在从本地文件运行脚本时加载网络工作者。

上面的链接包含一些解决方法，但我认为最好的方法是运行本地服务器以通过网络方案（http://localhost/...）加载工作人员。

推荐阅读