如何解决 Angular 中资源被阻止、MIME 类型不匹配的问题？

Question

我正在关注 Angular documentation 尝试尝试基本的 Web Worker 示例。

我构建了一个基本的 Angular 模板应用，它运行没问题。

我添加了一个名为 RunnerComponent 的非常基本的组件，然后运行命令（按照文档的指示）：

ng generate web-worker runner

这成功添加了依赖项并添加了新的 TypeScript 文件并将测试代码添加到我的 RunnerComponent。这是它包含在新添加的 runner.worker.ts:

中的简单代码

/// <reference lib="webworker" />

addEventListener('message', ({ data }) => {
  const response = `worker response to ${data}`;
  postMessage(response);
});

这是它在 runner.component.ts 中添加到我的 RunnerComponent 的代码：

if (typeof Worker !== 'undefined') {
  // Create a new
  const worker = new Worker('./runner.worker', { type: 'module' });
  worker.onmessage = ({ data }) => {
    console.log(`page got message: ${data}`);
  };
  worker.postMessage('hello');
} else {
  // Web Workers are not supported in this environment.
  // You should add a fallback so that your program still executes correctly.
}

应用程序继续运行就好了，但是当下面一行运行s 时，我得到错误：

const worker = new Worker('./runner.worker', { type: 'module' });

主要错误（通过 FireFox）

The resource from “http://localhost:4200/runner.worker” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)

我正在使用基本的 Angular 开发 Web 服务器（使用命令 ng serve 启动它）并且我假设那是 Node.js http-server但不完全确定。

你知道我为什么会收到这个错误吗？

它是否尝试提供实际的 runner.worker.ts 而不是生成的内容或其他内容？

有什么方法可以将 nosniff header 添加到 http-server 以便忽略错误 (X-Content-Type-Options: nosniff)？我应该在哪里添加？

我该如何解决这个问题？

更新：我尝试过的

我创建了一个 public GitHub 存储库，其中包含将展示此问题的 Angular CLI 项目。获取地址：https://github.com/raddevus/AngularWebWorker 您可以克隆回购并尝试并亲自查看错误。

已添加路线

我想这个问题可能与需要一条与我的 Runner.Component 相关的路由有关（WebWorker 请求的 URL 是 http://localhost:4200/runner.worker）所以我添加了一条路由以查看是否那会有所帮助。

const routes: Routes = [{ path:  'runner.worker', 
component:  RunnerComponent}
];

很遗憾，这并没有解决问题。

试用过 Edge 浏览器

我通常使用 FireFox，这就是我记录上述错误的原因。所以我也尝试了 MS Edge，但我确实遇到了类似的错误：

SEC7112: Script from http://localhost:4200/runner.worker was blocked due to mime type mismatch

已尝试Chrome 浏览器：版本 75.0.3770.100（官方构建）（64 位）

我看到以下内容：

runner.component.ts:13 Uncaught TypeError: Failed to construct 'Worker': Module scripts are not supported on DedicatedWorker yet. You can try the feature with '--enable-experimental-web-platform-features' flag (see https://crbug.com/680046)

at Module../src/app/runner.component.ts (runner.component.ts:13)

那行代码（runner.component.ts:13）是：

const worker = new Worker('./runner.worker', { type: 'module' });

相关的 link 很长，我必须通读一遍，看看它是否有意义。

Answer 1

我从 GitHub 站点提取我的代码（在本地测试），编译代码，现在解决方案有效（没有发生错误）。

您可以在下图中看到代码现在运行ning，因为预期的输出已写入 console.log 并显示第 runner.component.ts:15 行已执行。

我相信这现在可以工作了，因为我添加了 Angular 路由。但是，昨天和昨晚当我添加那条路线时，我仍然没有看到它起作用。我不确定这是 http-server 的问题还是缓存问题或其他问题。我将不得不进行调查以确定根本原因。

已删除路线，仍然有效

我删除了路由，再次停止了 http-server 和运行，代码仍然有效。现在我似乎无法重现问题。但是，如您所见，问题已解决，我已经在 Chrome 和 FireFox 中对其进行了测试。

更新：其他原因出现错误

我重新开始，试图重现似乎已经消失的问题。

我通过 CLI 创建了一个新的 Angular 项目：

ng new ThirdOne

我建造了它运行它。然后我通过原始文档再次添加了网络工作者

ng generate web-worker runner

然后我又看到了类似的错误，它指向那个特定的 web worker 行，但这是一个错误的错误。

您可以在 FireFox 中看到错误：

但是，现在和旧版本 Chrome（版本 56.0.2924.87）有点不同：

但是，将其与我在当前版本 Chrome（版本 75.0.3770.100（官方构建）（64 位））中得到的错误进行比较：

这是红鲱鱼

注意，它再次指向代码中的同一行，即 Web Worker 的实例化 (runner.component.ts:13)。注意：它也不会呈现尽可能多的页面。

const worker = new Worker('./runner.worker', { type: 'module' });

但是，这并不是真正的根本问题。这一切都非常可怕。

最终更新：Visual Studio代码：罪魁祸首？

我正在使用 Visual Studio 代码作为我的编辑器。

版本：1.35.1（用户设置）
提交：c7d83e57cd18f18026a8162d042843bda1bcf21f
日期：2019-06-12T14:30:02.622Z
电子: 3.1.8
Chrome：66.0.3359.181 Node.js：10.2.0 V8：6.6.346.32

OS: Windows_NT x64 10.0.14393

可能的 St运行ge 解决方案

发布最后一次更新后，我决定关闭 Visual Studio 代码中的项目并重新启动 http-server（节点 http 服务器）。我这样做了，问题就消失了。

而且，这可能与 Visual Studio 代码实现 Chrome 代码有关？？

昨天我多次重启 http-server 并继续看到问题。但是，我确实在 Visual Studio 代码中保持项目打开。这可能就是答案，而且很糟糕。

最终答案

今天（将近 2 周后），我再次致力于一个新的 Angular 项目并添加一个新的 Angular Web Worker。我再次遇到了这个问题。这次我验证了你必须:

关闭Visual Studio代码中的项目
停止 http 服务器
运行 ng build（重建您的 Angular 应用）
再次启动 http 服务器ng serve

问题将消失，您可以再次使用 Visual Studio 代码编辑项目。

Answer 2

我知道这是用户最终解决的一个较旧的问题，但考虑到这是在搜索引擎（在我的例子中是 duckduckgo）上搜索时的第一个结果，我想我会回答我的问题特殊情况。

在我的例子中，我正在开发一个 monorepo 项目，我试图运行的项目在 index.html 的头部有一个 <base /> 标签。结果，它导致文件从 http://localhost:4200/styles.css 重命名为 http://localhost:4200/ui/styles.css ，这导致了错误：

Refused to apply style from 'http://localhost:4200/ui/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

在我的例子中，前者 URL 存在而后者不存在。

解决方案是将基本标签改回：

<base href="/">

如何解决 Angular 中资源被阻止、MIME 类型不匹配的问题？

How do I resolve resource was blocked, MIME type mismatch in Angular?

web-worker

http-headers

visual-studio-code

angular