angular - 如何解决资源被阻止，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.
}

该应用程序继续运行良好，但是当以下行运行时，我收到错误:

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您可以将 repo 克隆下来并尝试一下，然后自己查看错误。

新增路线

我认为这个问题可能与需要与我的 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' });

相关链接很长，我必须通读它以查看它是否有意义。

Answer 1

我从 GitHub 站点提取了我的代码(在本地测试它)，编译了代码，现在解决方案有效(不会发生错误)。

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



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

已删除路线，仍然有效

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

更新:由于其他原因发生错误

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

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

ng new ThirdOne 

我构建并运行它。然后我通过原始文档再次添加了网络 worker

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 Code 作为我的编辑器。



版本 :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

操作系统 :Windows_NT x64 10.0.14393

可能的奇怪解决方案

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

而且，也许这与 Visual Studio Code 实现 Chrome 代码的事实有关？

昨天我多次重新启动http-server并继续看到问题。但是，我确实在 Visual Studio Code 中打开了该项目。这可能是答案，而且很可怕。

最终答案

今天(差不多 2 周后)，我再次在一个新的 Angular 项目上工作，并添加了一个新的 Angular Web Worker。我又遇到了这个问题。这次我已经验证您必须:

在 Visual Studio Code 中关闭项目

停止http服务器

运行 ng build (重建您的 Angular 应用程序)

再次启动http服务器ng serve

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