加载模块脚本失败：服务器以“text/plain”的非 JavaScript MIME 类型响应

Posted 2023-03-15

【中文标题】加载模块脚本失败：服务器以“text/plain”的非 JavaScript MIME 类型响应

【英文标题】：Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain"

【发布时间】：2020-05-11 12:25:36

【问题描述】：

。根据 html 规范对模块脚本强制执行严格的 MIME 类型检查。

尝试将此行添加到我的 HTML 代码后，我在 chrome 中收到此错误：

<script type="module">import * as hello from './__target__/hello.js'; window.hello = hello;</script>
<!-- From the official documentation of Transcrypt -->

我已经尝试修复了几个小时，有人建议将类型更改为 text/javascript 并使用 src 标记 (src = './__ target__/hello.js') 但我需要在 hello 中进行一些导入.js

已修复： 好的，我从命令行使用“python -m http.server”启动服务器，我只是用这个 python2 脚本替换了它：

#Use to create local host
import SimpleHTTPServer
import SocketServer

PORT = 8000

Handler = SimpleHTTPServer.SimpleHTTPRequestHandler
Handler.extensions_map.update(
    ".js": "application/javascript",
);

httpd = SocketServer.TCPServer(("", PORT), Handler)

print ("Serving at port", PORT)
print(Handler.extensions_map[".js"])
httpd.serve_forever()

【问题讨论】：

您显示的错误是服务器端错误：服务器应该告诉您的浏览器这是一个 js 文件，而不是纯文本文件。因此，首先将您的脚本放在一个文件中（不要内联它），然后使用 <script src="..." type="module"></script> 链接到该 .js 文件。如果这产生相同的错误，则您的服务器没有发送具有正确 mime 类型的文件，您应该解决这个问题（几乎每个服务器都可以为您执行此操作，因此只需 google 了解如何配置您的正确添加 MIME 类型标题）

您确定包含正确的文件吗？

我正在使用 python -m http.server 来尝试我的应用程序，我应该如何设置内容标题和 mime 类型？

@Mike'Pomax'Kamermans，在为 android 构建相同的应用程序后，我遇到了同样的问题，如果程序不在服务器上运行，我该如何更改 mime 类型？

【参考方案1】：

这个问题（以及所涉及的脚本）对我帮助很大。我已经修改了答案中提供的脚本，使其与python3兼容。

#Use to create local host
import http.server
import socketserver

PORT = 1337

Handler = http.server.SimpleHTTPRequestHandler
Handler.extensions_map.update(
      ".js": "application/javascript",
);

httpd = socketserver.TCPServer(("", PORT), Handler)
httpd.serve_forever()

显着的变化是：-

将 SimpleHTTPServer 更改为 http.server。从 python3 开始，SimpleHTTPServer 已经成为 http.server 的一部分

将 SocketServer 模块更改为 socketserver

函数向后兼容。

【参考方案2】：

您的网络服务器正在为 hello.js 和 Content-Type: text/plain 提供服务，浏览器不允许这样做，因为它不是 JavaScript。

您需要更新您的网络服务器配置，以便它使用Content-Type: application/javascript 为该文件（可能还有所有*.js 文件）提供服务。

【讨论】：

谢谢你的回答，但是如果我使用cordova在android上构建它（所以没有任何服务器）怎么办？在这种情况下，我得到服务器以非 JavaScript MIME 类型“”

响应

@FabrizioApuzzo - application/javascript 是一种 JavaScript MIME 类型。再说一遍：服务器需要正确地提供文件。

好的，但是我正在使用将html5转换为原生移动应用程序的框架，所以我没有任何服务器要配置

@FabrizioApuzzo - 那里可能嵌入了一个服务器（通常有）。您必须深入研究文档。

您好，我是一名 JS 学习者，尽管我的文件是 json，但在控制台中输入时也会出现同样的错误：import('https://raw.githubusercontent.com/ljharb/json-file-plus/master/package.json').then(m=> console.log(m)); 我该怎么办？我也试过这个：a=document.createElement('script'); a.setAttribute('type','module'); a.textContent = "import * as name from 'https://raw.githubusercontent.com/ljharb/json-file-plus/master/package.json'; console.log(name);" document.body.append(a)