由于不允许的 MIME 类型(“text/html")，模块被阻止 [英] Module was blocked because of a disallowed MIME type ("text/html")
问题描述
我很惊讶关于同一个问题有这么多问题，但在任何地方都没有好的答案.事实上这个问题并没有'甚至没有一个答案.无论如何，我的问题非常相似.在我决定在同一个端口(在我的情况下为 PORT 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>
但现在他们正在制造这些错误:
<块引用>从http://localhost:3000/runtime-es2015.858f8dd898b76fejs862 加载模块"由于不允许的 MIME 类型(text/html")而被阻止.
从http://localhost:3000/polyfills-es2015.5728f680579fe.js7 加载模块"由于不允许的 MIME 类型(text/html")而被阻止.
从http://localhost:3000/main-es2015.ec7a803b995f0djs691eeb加载模块"由于不允许的 MIME 类型(text/html")而被阻止.
我尝试设置 type=text/javascript 以及更多解决方案和技巧.但没有任何效果.
PS:这里是构建前的整个项目.另请查看其自述文件.
您遇到的问题是服务器找不到您的 javascript 文件.它返回一个带有状态代码的错误标头，例如 404(未找到)、401(未授权)和一个 html 页面，位于以下几行:
<身体>未找到错误404</html>由于浏览器需要一个 javascript 文件(脚本元素的默认 MIME 类型是 type=text/javascript")，它会在收到 HTML 文件时报错.>
您可以在浏览器的开发人员工具中查看服务器响应(状态代码和实际 html).转到网络"选项卡，然后单击其中一个 javascript 文件以查看响应的标头和内容.
I'm surprised that there are so many questions regarding the same problem but there are no good answers anywhere. In fact this question doesn't even have a single answer. Anyway, my problem is much similar. Everything was working fine before I decided to run my frontend and backend both on same port (PORT 3000 in my case). I followed these steps:
- Used
ng build --prodto compile development file. Adistfolder was created. - Then just uploaded all the server files and dist folder to server.
- And run the server using pm2. The command is
pm2 start server.js.
Well I know from where did these lines come in 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>
But now they are creating these errors:
Loading module from "http://localhost:3000/runtime-es2015.858f8dd898b75fe86926.js" was blocked because of a disallowed MIME type ("text/html").
Loading module from "http://localhost:3000/polyfills-es2015.5728f680576ca47e99fe.js" was blocked because of a disallowed MIME type ("text/html").
Loading module from "http://localhost:3000/main-es2015.ec7a803b995f0d691eeb.js" was blocked because of a disallowed MIME type ("text/html").
I tried setting type=text/javascript and many more solutions and hacks. But nothing is working.
PS: Here is the entire project before build. View its README also.
The problem you have, is that your javascript files are not being found by the server. It returns an error header with status code like 404 (Not Found), 401 (Unauthorized) and an html page somewhere along these lines:
<html>
<body>
ERROR 404: NOT FOUND
</body>
</html>
Since the browser expects a javascript file (the default MIME Type of the script element is type="text/javascript"), it will complain when it receives an HTML-file.
You can see the server response (status code and the actual html) in the developer tools of your brower. Go to the Network tab and click one of the javascript file to see the headers and the content of the response.
这篇关于由于不允许的 MIME 类型(“text/html")，模块被阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
