由于不允许的 MIME 类型（“text/html”），ASP Net Core 内部的 Angular 8 被阻止

Posted 2023-02-27

【中文标题】由于不允许的 MIME 类型（“text/html”），ASP Net Core 内部的 Angular 8 被阻止

【英文标题】：Angular 8 inside of ASP Net Core was blocked because of a disallowed MIME type (“text/html”)

【发布时间】：2020-05-11 18:05:00

【问题描述】：

我正在尝试设置我自己的 Angular 8 应用程序以从 ASP.Net Core 网站内部提供服务（因此我不必处理跨站点脚本或拥有两个（子）域，或身份验证问题。

我在 VS Code 中构建了一个 Web 应用程序，并将其编译到我的 asp net core 3.0 项目中的文件夹 wwwroot/app 中（我可以使用 ng serve 运行该应用程序就好了）。

我已经在StartupConfigureServices()添加了这个

services.AddSpaStaticFiles(configuration =>

 configuration.RootPath = "wwwroot/app";
);

并在Configure() 中有这个

app.UseSpa(spa => );

这部分有效。当我加载 asp.net 项目时，角度应用程序开始加载。但是控制台充满了（生成的 index.html 中指定的每个文件一个）：

由于不允许的 MIME 类型（“text/html”），从“https://localhost:5001/runtime.js”加载模块被阻止。

由于不允许的 MIME 类型（“text/html”），从“https://localhost:5001/polyfills.js”加载模块被阻止。

由于不允许的 MIME 类型（“text/html”），从“https://localhost:5001/vendor.js”加载模块被阻止。

由于不允许的 MIME 类型（“text/html”），从“https://localhost:5001/styles.js”加载模块被阻止。

由于不允许的 MIME 类型（“text/html”），从“https://localhost:5001/main.js”加载模块被阻止。

据我了解，angular-cli 在文件“编译” 时并未在文件中包含 mime 类型，因此网络浏览器不关心它们。

有角度的人不认为这是一个错误/错误，并且已经关闭了一个与此相关的问题（尽管这种行为与 Angular 7 的做法不同）：https://github.com/angular/angular-cli/issues/10325

阅读这个问题How to add Mime Types in ASP.NET Core 我想我也许可以做这样的事情：

var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".js"] = "application/javascript";
provider.Mappings[".html"] = "text/html";
provider.Mappings[".ico"] = "image/vnd.microsoft.icon";


var statFilesOptions = new StaticFileOptions

    ContentTypeProvider = provider
;

app.UseSpa(spa =>

    spa.Options.DefaultPageStaticFileOptions = statFilesOptions;
);

将 mime/类型添加到文件中。但这根本没有任何作用。

关于如何在不编辑生成的文件的情况下解决此问题的任何其他想法？

【问题讨论】：

对我来说发生的原因是我忘记从 ControllerBase 类继承 API 控制器。

【参考方案1】：

问题根本不是我所期望的。 asp.net 核心应用程序实际上为所有请求返回 index.html 文件，因为它找不到 javascript 文件。因此错误实际上是正确的。

将index.html 中的<base href="/"> 更改为<base href="/app/"> 部分解决了这个问题，因为它现在知道在我放置它们的应用程序文件夹中查找文件，但重新加载停止工作（因为 url 错误）。

我的解决方案是在asp net core项目中将angular build的输出文件夹设置为/wwwroot/的根目录。现在一切正常。

【讨论】：

我在没有锁定的情况下这样做了几个小时。最后发现/app/中的/真的很重要。所以我把这个留给其他人。