由于不允许的 MIME 类型（“text/html”），模块被阻止答案

【问题标题】：Module was blocked because of a disallowed MIME type ("text/html")由于不允许的 MIME 类型（“text/html”），模块被阻止
【发布时间】：2020-01-30 01:29:08
【问题描述】：

我很惊讶有这么多关于同一个问题的问题，但在任何地方都没有好的答案。事实上this 问题甚至没有一个答案。无论如何，我的问题很相似。在我决定在同一个端口（在我的情况下为 3000 端口）上运行我的前端和后端之前，一切都运行良好。我按照以下步骤操作：

使用ng build --prod编译开发文件。已创建 dist 文件夹。
然后将所有服务器文件和dist文件夹上传到服务器。
并使用 pm2 运行服务器。命令是pm2 start server.js。

我知道index.html这些台词是从哪里来的：

script src="runtime-es2015.858f8dd898b75fe86926.js" type="module"

script src="polyfills-es2015.5728f680576ca47e99fe.js" type="module"

script src="runtime-es5.741402d1d47331ce975c.js" nomodule>

script src="polyfills-es5.7f43b971448d2fb49202.js" nomodule>

script src="main-es2015.ec7a803b995f0d691eeb.js" type="module">

script src="main-es5.1cd51b4ce24f28c1391b.js" nomodule>

但现在他们正在制造这些错误：

由于不允许的 MIME 类型（“text/html”），从“http://localhost:3000/runtime-es2015.858f8dd898b75fe86926.js”加载模块被阻止。

由于不允许的 MIME 类型（“text/html”），从“http://localhost:3000/polyfills-es2015.5728f680576ca47e99fe.js”加载模块被阻止。

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

我尝试设置type=text/javascript 以及更多解决方案和技巧。但没有任何效果。

PS：Here 是构建之前的整个项目。也可以查看它的 README。

【问题讨论】：

这听起来像是您之前问题的重复。发生了什么变化，它们有何不同？

标签： javascript mime-types

【解决方案1】：

您遇到的问题是服务器没有找到您的 javascript 文件。它返回一个带有状态码的错误标头，例如 404（未找到）、401（未授权）和一个 html 页面，如下所示：

<html>
    <body>
    ERROR 404: NOT FOUND
    </body>
</html>

由于浏览器需要一个 javascript 文件（脚本元素的默认 MIME 类型是type="text/javascript"），它会在收到 HTML 文件时报错。

您可以在浏览器的开发人员工具中查看服务器响应（状态代码和实际的 html）。转到“网络”选项卡并单击其中一个 javascript 文件以查看响应的标题和内容。

【讨论】：

我可以补充一点，由于 index.html 中的 <base href="\"> 定义，JS 文件很可能找不到

【解决方案2】：

对我来说，当我使用 app.use(express.static(path.join(__dirname, "..", "dist"))); 提供我的 dist 文件夹时，错误得到了解决。你的路径可能不同。

在提供静态 JS 文件之前，服务器无法找到它们，但现在他找到了。

【讨论】：

【解决方案3】：

也许与 OP 没有直接关系，但可能会帮助到这里的其他人。

如果您的 import 语句没有 .js 扩展名，可能会出现同样的错误。

例如，在 Firefox 的本地开发过程中，尝试从同一文件夹中的“模块”导入的主脚本如下所示会产生错误：

import { MyClass } from './my_module';

这可以通过添加.js 扩展来解决：

import { MyClass } from './my_module.js';

【讨论】：