如何解决资源被阻止，Angular中的MIME类型不匹配? [英] How do I resolve resource was blocked, MIME type mismatch in Angular?

问题描述

我正在跟踪 Angular文档，尝试尝试基本的Web Worker示例.

I am following Angular documentation attempting to try out a basic Web Worker sample.

我构建了一个基本的Angular模板应用程序，并且运行良好.

I built a basic Angular template app and it runs fine.

我添加了一个名为RunnerComponent的非常基本的组件，然后运行了该命令(按照docs的指示):

I added a very basic component named RunnerComponent and then ran the command (as directed by docs):

ng generate web-worker runner

这成功添加了依赖关系，并添加了新的TypeScript文件，并将测试代码添加到了我的RunnerComponent. 这是新添加的Runner.worker.ts中包含的简单代码:

That successfully adds the dependencies and adds the new TypeScript file and adds the test code to my RunnerComponent. Here's the simple code it includes in the newly added runner.worker.ts:

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

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

这是在Runner.component.ts中添加到我的RunnerComponent的代码:

Here's the code it adds to my RunnerComponent in runner.component.ts:

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.
}

应用程序继续正常运行，但是当以下行运行时，出现错误:

The app continues to run just fine, but when the following line runs, I get the error:

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

主要错误(通过FireFox)

" http://localhost:4200/runner.worker 中的资源被阻止 由于MIME类型("text/html")不匹配(X-Content-Type-Options: nosniff)

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服务器，但并不完全确定.

I'm using the basic Angular development web server (starting it up with the command ng serve) and I'm assuming that is the Node.js http-server but not entirely sure.

您知道为什么我会收到此错误吗?

Do you know why I'm getting this error?

是否要为实际的runner.worker.ts提供服务，而不是为生成的内容或服务提供服务?

Is it trying to serve the actual runner.worker.ts and not the generated content or something?

是否可以将nosniff标头添加到http服务器，以便忽略该错误(X-Content-Type-Options: nosniff)?我要在哪里添加?

Is there a way I can add the nosniff header to the http-server so the error will be ignored (X-Content-Type-Options: nosniff)? Where would I add that?

我该如何解决?

更新:我尝试过的事情

我创建了一个公共GitHub存储库，其中包含将展示此问题的Angular CLI项目.在以下位置获取它: https://github.com/raddevus/AngularWebWorker 您可以克隆存储库，然后尝试一下，亲眼看看错误.

I have created a public GitHub repo which contains the Angular CLI project that will showcase this issue. Get it at: https://github.com/raddevus/AngularWebWorker You can clone the repo down and try it and see the error for yourself.

添加的路线

我以为这个问题可能与需要与Runner.Component相关的路由有关(WebWorker请求的URL为

I thought maybe this issue was related to needing a route related to my Runner.Component (the URL requested by the WebWorker is http://localhost:4200/runner.worker) so I added a route to see if that would help.

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

不幸的是，这不能解决问题.

Unfortunately, this did not solve the problem.

试用版浏览器

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

I normally use FireFox and that is what I documented the error above from. So I also tried MS Edge and I do get a similar error:

SEC7112: http://localhost:4200/runner.worker 中的脚本被阻止 由于mime类型不匹配

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未捕获的TypeError:未能构造 'Worker':DedicatedWorker尚不支持模块脚本.你 可以尝试使用"--enable-experimental-web-platform-features"功能 标记(请参见 https://crbug.com/680046 )

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)是:

That line of code (runner.component.ts:13) is:

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

关联的链接很长，我必须通读该链接以了解它是否有意义.

The associated link is long and I'll have to read through that to see if it has something meaningful.

推荐答案

我从GitHub站点上提取了我的代码(以在本地进行测试)，编译了代码，现在解决方案起作用了(没有错误发生).

I pulled my code from the GitHub site (to test it locally), compiled the code and now the solution works (error does not occur).

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

You can see the code is now running in the following image, because the expected output is written to the console.log and shows that line runner.component.ts:15 is executed.

我认为这现在可行，因为我添加了"Angular Route".但是，昨天和昨晚，当我添加该路线时，我仍然没有看到它的作用.我不确定这是http服务器问题还是缓存问题或其他原因.我将不得不进行调查以确定根本原因.

I believe this now works because I added the Angular Route. However, yesterday and last night when I added that route I still didn't see it working. I'm not sure if this is a problem with the http-server or a caching problem or whatever. I will have to investigate to determine the root cause.

已删除路线，仍然可以运行

我删除了路由，停止了http服务器，然后再次运行它，代码仍然有效.现在，我似乎无法重现问题.但是，您可以看到问题已解决，并且我已经在Chrome和FireFox中对其进行了测试.

I removed the route, stopped the http-server and ran it again and the code still works. Now I can't seem recreate the problem. However, as you can see the issue is resolved and I've tested it in both Chrome and FireFox.

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

我从头开始，试图重现似乎已经消失的问题.

I started completely over in an attempt to recreate the problem that seemed to have disappeared.

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

I created a new Angular project via CLI:

ng new ThirdOne 

我构建并运行了它.然后，我通过原始文档再次添加了网络工作者

I built it and ran it. Then I added the web worker again via the original docs

ng generate web-worker runner

然后我再次看到类似的错误，该错误指向该特定的Web工作人员行，但它是错误的错误.

Then I saw the similar error again which points to that specific web worker line but is a false error.

您可以在FireFox中看到错误:

You can see the error in FireFox:

但是，现在它与旧版本的Chrome(版本56.0.2924.87)有所不同:

But, it is now a bit different in and older version of Chrome (Version 56.0.2924.87):

但是，将其与我在当前版本的Chrome(版本75.0.3770.100(正式版本)(64位))中遇到的错误进行比较:

But, compare that to the error I get in the current version of Chrome (Version 75.0.3770.100 (Official Build) (64-bit)):

这是《红鲱鱼》

注意，它再次指向代码中的同一行，该行是Web Worker的实例化(runner.component.ts:13). 注意:它也不会渲染页面太多.

Notice, that it again points to that same line in the code which is the instantiation of the Web Worker (runner.component.ts:13). Note: It doesn't render as much of the page either.

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

但是，这并不是真正的根本问题.这一切都非常糟糕.

But, that isn't really the root issue. This is all quite terrible.

最终更新:Visual Studio代码:罪魁祸首?

我正在使用Visual Studio Code作为编辑器.

I'm using Visual Studio Code as my editor.

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

Version: 1.35.1 (user setup)
Commit: c7d83e57cd18f18026a8162d042843bda1bcf21f
Date: 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

OS: Windows_NT x64 10.0.14393

可能的奇怪解决方案

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

After posting that last update, I decided to close the project in Visual Studio Code and restart the http-server (node http server). I did so and the problem went away.

而且，这可能与Visual Studio Code实现Chrome代码这一事实有关?

And, maybe that is related to the fact that Visual Studio Code implements Chrome code??

昨天，我多次重启了HTTP服务器，并继续看到问题所在.但是，我确实在Visual Studio Code中将项目保持打开状态.这可能是答案，这很可怕.

Yesterday I restarted the http-server numerous times and continued to see the problem. However, I did keep the project open in Visual Studio Code. This may be the answer and it is terrible.

最终答案

今天(将近2周)，我再次从事新的Angular项目并添加新的Angular Web Worker.我又遇到了问题.这次，我已确认您必须:

Today (almost 2 weeks later), I was once again working on a new Angular project and adding a new Angular Web Worker. I experienced the problem again. This time I have verified that you have to :

1. 在Visual Studio Code中关闭项目
2. 停止http服务器
3. 运行ng build(重建Angular应用)
4. 再次启动http服务器ng serve

1. Close the project in Visual Studio Code
2. Stop the http server
3. run ng build (rebuild your Angular app)
4. Start http server again ng serve

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

The problem will be gone and you can edit the project with Visual Studio Code again.

这篇关于如何解决资源被阻止，Angular中的MIME类型不匹配?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！