如何解决 Angular 中资源被阻止、MIME 类型不匹配的问题？
rad*_*vus 5 web-worker http-headers visual-studio-code angular
我正在按照Angular 文档尝试尝试基本的 Web Worker 示例。
\n\n我构建了一个基本的 Angular 模板应用程序，它运行良好。
\n\n我添加了一个名为 RunnerComponent 的非常基本的组件，然后运行命令（按照文档的指示）：
\n\nng generate web-worker runner\n这成功添加了依赖项并添加了新的 TypeScript 文件，并将测试代码添加到我的 RunnerComponent 中。\n这里是新添加的 runner.worker.ts 中包含的简单代码：
\n\n/// <reference lib="webworker" />\n\naddEventListener(\'message\', ({ data }) => {\n const response = `worker response to ${data}`;\n postMessage(response);\n});\n这是它添加到 runner.component.ts 中的 RunnerComponent 的代码：
\n\nif (typeof Worker !== \'undefined\') {\n // Create a new\n const worker = new Worker(\'./runner.worker\', { type: \'module\' });\n worker.onmessage = ({ data }) => {\n console.log(`page got message: ${data}`);\n };\n worker.postMessage(\'hello\');\n} else {\n // Web Workers are not supported in this environment.\n // You should add a fallback so that your program still executes correctly.\n}\n该应用程序继续运行得很好，但是当运行以下行时，我收到错误：
\n\nconst worker = new Worker(\'./runner.worker\', { type: \'module\' });\n主要错误（通过 FireFox）
\n\n\n\n\n由于 MIME 类型 (\xe2\x80\x9ctext/html\xe2\x80\x9d)，来自 \xe2\x80\x9c http://localhost:4200/runner.worker \ xe2\x80\x9d的资源被阻止\n不匹配（X-Content-Type-Options：\n nosniff）
\n
我正在使用基本的 Angular 开发 Web 服务器（使用命令启动它ng serve），我假设这是 Node.js http 服务器，但不完全确定。
你知道为什么我会收到此错误吗？
\n\n它是否试图为实际的 runner.worker.ts 提供服务，而不是生成的内容或其他内容？
\n\n有没有办法可以将 nosniff 标头添加到 http 服务器，以便忽略错误 ( X-Content-Type-Options: nosniff)？我该在哪里添加呢？
我该如何解决这个问题？
\n\n更新：我尝试过的
\n\n我创建了一个公共 GitHub 存储库，其中包含将展示此问题的 Angular CLI 项目。获取它： https: //github.com/raddevus/AngularWebWorker 您可以克隆该存储库并尝试它并亲自查看错误。
\n\n添加路线
\n\n我想这个问题可能与需要与我的 Runner.Component 相关的路由有关（WebWorker 请求的 URL 是http://localhost:4200/runner.worker），所以我添加了一条路由来看看是否有帮助。
\n\nconst routes: Routes = [{ path: \'runner.worker\', \ncomponent: RunnerComponent}\n];\n不幸的是，这并没有解决问题。
\n\n尝试过边缘浏览器
\n\n我通常使用 FireFox，这就是我记录上述错误的原因。\n因此我也尝试了 MS Edge，但确实收到了类似的错误：
\n\n\n\n\nSEC7112：由于 mime 类型不匹配，来自http://localhost:4200/runner.worker 的脚本被阻止\n
\n
尝试过 Chrome 浏览器：版本 75.0.3770.100（官方版本）（64 位）
\n\n我看到以下内容：
\n\n\n\n\nrunner.component.ts:13 Uncaught TypeError: 无法构造\n \'Worker\': DedicatedWorker 尚不支持模块脚本。您可以使用 \'--enable-experimental-web-platform-features\'\n 标志尝试该功能（请参阅https://crbug.com/680046）
\n
at Module../src/app/runner.component.ts (runner.component.ts:13)\n该行代码 (runner.component.ts:13) 是：
\n\nconst worker = new Worker(\'./runner.worker\', { type: \'module\' });\n相关链接很长，我必须仔细阅读该链接，看看它是否有意义。
\n我从 GitHub 站点提取代码（在本地进行测试），编译了代码，现在解决方案可以运行（不会出现错误）。
您可以在下图中看到代码现在正在运行，因为预期输出已写入 console.log 并显示 runner.component.ts:15 行已执行。
我相信这现在有效，因为我添加了角度路线。然而，昨天和昨晚，当我添加该路线时，我仍然没有看到它起作用。我不确定这是否是 http 服务器的问题或缓存问题或其他问题。我必须进行调查以确定根本原因。
已删除的路线，仍然有效
我删除了路由，停止了 http 服务器并再次运行它，代码仍然有效。现在我似乎无法重现这个问题。不过，正如您所看到的，问题已经解决，并且我已经在 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 Code：罪魁祸首？
我使用 Visual Studio Code 作为编辑器。
版本：1.35.1（用户设置）
提交：c7d83e57cd18f18026a8162d042843bda1bcf21f
日期：2019-06-12T14:30:02.622Z
Electron：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 服务器并继续看到该问题。不过，我确实在 Visual Studio Code 中保持项目打开。这可能就是答案，而且很可怕。
最终答案
今天（差不多两周后），我再次致力于一个新的 Angular 项目并添加一个新的 Angular Web Worker。我再次遇到了这个问题。这次我已经验证您必须：
- 在 Visual Studio Code 中关闭项目
- 停止http服务器
- 运行
ng build（重建你的 Angular 应用程序） - 再次启动http服务器
ng serve
问题将会消失，您可以再次使用 Visual Studio Code 编辑项目。
| 归档时间： |
|
| 查看次数： |
7689 次 |
| 最近记录： |