由于不允许的 MIME 类型（“text/html”）而被阻止：部署在 tomcat 9.0.30 上的 Angular 8 无法提供资产答案

【问题标题】：Blocked because of a disallowed MIME type (“text/html”) : Angular 8 deployed on tomcat 9.0.30 fails to serve the assets由于不允许的 MIME 类型（“text/html”）而被阻止：部署在 tomcat 9.0.30 上的 Angular 8 无法提供资产
【发布时间】：2020-05-12 12:20:08
【问题描述】：

我有一个项目，其中用户界面基于 Angular 8，后端是 springboot java 服务。整个项目是一个多模块项目，角度部分是一个单独的模块，front-end builder 用于将角度代码构建到单个可执行 jar 中。使用嵌入式 tomcat 时应用程序运行良好。我有一个新要求，要尝试在外部 tomcat 上单独部署 angular ui 部分。但是当我将 dist 文件夹复制到 webapps 文件夹并尝试提供它时，浏览器会阻止请求说：

Loading module from “http://localhost:8080/polyfills-es2015.js” was blocked because of a disallowed MIME type (“text/html”).

在进行了一些谷歌搜索后，我了解到问题的发生是因为 Angular 8 cli 无法将 type 属性添加到 script 中的 script 标记@ 。当我手动添加类型时，一切正常。任何人都可以帮助我了解为什么会发生这种情况，以及除了手动编辑之外的可能解决问题的方法。

生成index.html：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My Application</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <i class="fas fa-chart-area"></i>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body style="margin: 0;">
  <app-root></app-root>
<script src="runtime-es2015.js" type="module"></script><script src="runtime-es5.js" nomodule defer></script><script src="polyfills-es5.js" nomodule defer></script><script src="polyfills-es2015.js" type="module"></script><script src="styles-es2015.js" type="module"></script><script src="styles-es5.js" nomodule defer></script><script src="scripts.js" defer></script><script src="vendor-es2015.js" type="module"></script><script src="vendor-es5.js" nomodule defer></script><script src="main-es2015.js" type="module"></script><script src="main-es5.js" nomodule defer></script></body>

</html>

所以，总结一下所有可行的方法，如下：

在 HTML5 中 type 属性不再是强制性的，因此 Angular cli 不再将其添加为属性。在嵌入式 tomcat 中，资产被复制到 ROOT 完美工作，当我部署在外部 tomcat 中时，我将资产保存在 webapps 中的文件夹下，这意味着我必须修改 baseHref 字段（在构建期间使用命令或手动构建后）以反映相同。以下作品：
将资产保存在 webapps 中的 ROOT 文件夹下（一切正常，因为 js 文件现在位于根目录 / 下）。
将文件保存在文件夹下，例如 MyApp 并将其指定为 baseHref in index.html 。

相关link

【问题讨论】：

好像服务器认为JS文件是HTML文件...
我遇到了这个 b/c，由于某些缓存问题，我的浏览器试图获取一个不存在的 js 文件。一个简单的 CTRL+SHIFT+R 修复了它。
你找到答案了吗？从 Angular 7 升级到 Angular 8 后，我看到了同样的问题。
@Andrew 我面临的问题已通过接受的答案得到解决，我已将其摘要添加到问题本身中。
我赞成“Stack Underflow”，因为他/她关于“不存在的 js 文件”的评论为我指明了正确的方向。我遇到了由错误命名的 js 文件引起的类似问题。对我来说主要的收获是，如果找不到文件，你会得到这个令人困惑的 mime 类型错误。

标签： angular spring spring-boot angular8 tomcat9

【解决方案1】：

 <base href="/">

是问题，将其更改为您的上下文根。或者改成

<base href=".">

浏览器无法找到您的 JS 文件，因为它会查找相对于基本 href 的 JS 文件。

你的基本 href= "/" ，所以它会在 "localhost:8080/" 中查找所有 js 文件，但是您的 JS 文件可能存在于“localhost:8080/someRoot”中

您可以想到的另一种解决方案是，如果您的项目允许，则在没有上下文 root 的情况下部署在 tomcat 的 ROOT 文件夹中

【讨论】：

那么为什么当我将 type="text/javascript" 添加到 index.html 脚本标签时它会起作用？另外，我从嵌入式 tomcat 提供这个服务没有问题。
这个位置有Js文件吗？ "localhost:8080/polyfills-es2015.js" 表示你的 webapps 文件夹中直接有 js 吗？
嵌入式 tomcat 可能已将项目部署在 ROOT 文件夹中。请注意 type="text/javascript" 在 HTML5 中是可选的，如果没有 "text/javascript"，您的代码应该可以工作
我已经添加到tomcat的ROOT了。
但是当它从另一个文件夹提供时它不起作用。我认为您是对的，将其保留在 ROOT 中即可。

【解决方案2】：

这个问题困扰了我一段时间。对于像我这样不小心的人，请确保在导入的文件名末尾有.js。

【讨论】：

谢谢，这解决了我的问题...当我编写导入语句时，eslint 自动从我的文件名中删除了.js，我认为应该没问题...猜不。 :)
并非所有英雄都穿着斗篷。谢谢科切斯！

【解决方案3】：

服务器认为你的JS文件是HTML文件。

这可能是因为服务器端识别有问题或者JS文件不存在（服务器没有发送404状态码？）或者里面没有js。

因此，它发送 Content-Type text/html。

浏览器看到内容类型，认为这不是css，不允许。

如果您指定类型（客户端）或更改类型服务器端，它应该可以工作。

【讨论】：

是的，我已经尝试在服务器端手动添加 index.html 中的类型，它就像我在问题中所说的那样工作。但是为什么 Angular cli 在 ng build 期间不添加它？
文件的自动识别好像有问题
就我而言就是这样。当我创建导入语句时，我的 IDE 自动省略了 .js 文件扩展名。将.js 添加到import { thing } from './file.js'; 就可以了。