时间戳

首页 > 解决方案 > 由于不允许的 MIME 类型（“text/html”），模块被阻止

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

问题描述

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

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

好吧，我知道这些行是从哪里来的index.html：

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

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

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

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

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

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

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

从“<a href="http://localhost:3000/runtime-es2015.858f8dd898b75fe86926.js" rel="noreferrer">http://localhost:3000/runtime-es2015.858f8dd898b75fe86926.js”加载模块被阻止，因为不允许的 MIME 类型（“text/html”）。

从“<a href="http://localhost:3000/polyfills-es2015.5728f680576ca47e99fe.js" rel="noreferrer">http://localhost:3000/polyfills-es2015.5728f680576ca47e99fe.js”加载模块被阻止，因为不允许的 MIME 类型（“text/html”）。

从“<a href="http://localhost:3000/main-es2015.ec7a803b995f0d691eeb.js" rel="noreferrer">http://localhost:3000/main-es2015.ec7a803b995f0d691eeb.js”加载模块被阻止，因为不允许的 MIME 类型（“text/html”）。

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

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

标签： javascriptmime-types

解决方案

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

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

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

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

推荐阅读