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

Question

我有一个项目，用户界面基于angular 8，后端是springboot java服务。整个项目是一个多模块项目，角度部分是一个单独的模块，

front-end builder

用于将角度代码构建到单个可执行 jar 中。使用嵌入式 tomcat 时应用程序运行良好。我有一个新的要求，要尝试在外部 tomcat 上单独部署角度 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

中的

index.html

标签。当我手动添加类型时，一切正常。任何人都可以帮助我理解为什么会发生这种情况，以及除了手动编辑之外的问题的可能解决方案。

生成

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>

所以，总结所有有效的东西，如下所示：

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

相关链接

Answer 1

 <base href="/">

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

<base href=".">

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

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

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

Answer 2

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

.js

。

Answer 3

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

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

因此，它发送 Content-Type

text/html

.

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

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

Answer 4

这是适用于我的 vanilla JS 项目的解决方案

问题描述：浏览器无法找到您想要的文件，因此向您发送一个 404 HTML 页面作为对您脚本请求的响应（等待 js，但得到一些 html）

导入必须有 type="module" 例如：

<script type="module" src="./main.js"></script>

所有导入必须使用 .js 完成例如：

import characterData from "./modules/data.js";

如果仍然不起作用，请删除所有导入并重新写入（在 VSCode 中有更多帮助）
如果仍然以某种方式中断，请将
```
main.js
```
保留在根文件夹中，并将所有其他内容添加到新的
```
modules
```
文件夹

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

问题描述投票：0回答：4

4个回答

最新问题

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

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4