加载模块脚本失败：服务器以非 JavaScript MIME 类型“”响应。执行严格的 MIME 类型检查
Posted
技术标签:
【中文标题】加载模块脚本失败：服务器以非 JavaScript MIME 类型“”响应。执行严格的 MIME 类型检查【英文标题】：Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced 【发布时间】：2021-06-05 20:18:28 【问题描述】：我正在尝试从 init2.js 文件加载模块，但一直收到错误消息无法加载模块脚本：服务器以非 javascript MIME 类型“”响应。根据 html 规范对模块脚本强制执行严格的 MIME 类型检查。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
//lading the javascript module
let script = document.createElement('script');
script.src = "init2.js";
script.type = "module";
document.head.append(script);
//redirecting to error page if module/script fails to load
script.onerror = function()
//window.location.href = "error.html";
//onsubmit of form function
function localStor()
var inputFName = document.getElementById("fname");
var inputLName = document.getElementById("lname");
var inputEmail = document.getElementById("email");
window.localStorage.setItem("first name", inputFName.value);
window.localStorage.setItem("last name", inputLName.value);
window.localStorage.setItem("email", inputEmail.value);
</script>
<!--<script src="init.js" type="module"></script>-->
<title>Cupcake & Ice Cream Creator</title>
</head>
<body>
<h1>Cupcake & Ice Cream Creator</h1>
<div id="selects">
</div>
<br>
<div id="choices">
</div>
<div id="selects2">
</div>
<br>
<div id="choices2">
</div>
<br>
<div id="img">
</div>
<h2>Contact Information</h2>
<form name="contact" method="get">
<input type="text" name="firstname" placeholder="First Name" id="fname" required><br>
<input type="text" name="lastname" placeholder="Last Name" id="lname" required><br>
<input type="text" name="email" placeholder="Email" id="email" required><br>
<input type="submit" value="Submit" onclick="localStor()"><br>
</form>
<br>
<a href="index.html"><button>Start Over</button></a>
</body>
</html>
【问题讨论】：
【参考方案1】：当我提供/引用错误的 style.css 文件时，我遇到了同样的错误。
<link rel="stylesheet" type="text/css" href="style.css">
请检查您的 css 和 script 文件是否正确。如果您提供/提供错误的参考，则会看到此错误。
【讨论】：
以上是关于加载模块脚本失败：服务器以非 JavaScript MIME 类型“”响应。执行严格的 MIME 类型检查的主要内容，如果未能解决你的问题，请参考以下文章
本地文件中的 ES6 模块 - 服务器以非 JavaScript MIME 类型响应
加载模块脚本失败：服务器以“text/plain”的非 JavaScript MIME 类型响应
Angular 10 - 无法加载模块脚本：服务器以“text/html”的非 JavaScript MIME 类型响应
GCP App Engine / Angular - 无法加载模块脚本：服务器以“text/html”的非 JavaScript MIME 类型响应