js相关
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.
起因
通过script标签导入js，并指定type="module"，结果发现浏览器报上面的错
解决
（不想看过程的可以直接跳到第四步）
- 查看js文件response的响应头中，
Content-Type的值为text/plain; charset=utf-8（正常来说应该是application/javascript），而对于大部分浏览器来说都会对返回的mime类型进行校验，因此无法正确解析（部分浏览器中可能不会有这种错，例如：edge） - 而由于后台是通过
flask编写的，于是认为是服务端对静态文件返回的响应头类型有问题，而追根溯源，发现响应头的内容类型是通过mimetypes模块来获取的 - 在
mimetypes默认的配置里.js的类型是application/javascript，但是使用时被改成了text/plain，而该值实际上是从注册表中获取的 -
redegit命令打开注册表，查看HKEY_CLASSES_ROOT->.js，发现里面有一个Content-Type的配置，如图：
- 将该配置删掉即可
总结原因
注册表内.js的Content-Type覆盖了默认的，删掉即可，该方法适用于部分响应头的Content-Type返回不正确的情况
html事件参数空格问题
例如下面代码：
<style>
</style>
<body>
</body>
<script>
function test(a, b) {
console.log(a, b);
}
let div1 = document.createElement("div");
// 动态生成的标签的事件参数间不能加空格，否则解析会出问题（空格会被当做属性的分隔符）
// 即被解析成：onclick=test("x1",和"y1")两个字段
div1.innerHTML = `<button onclick=test("x1", "y1")>div1</button>`;
let div2 = document.createElement("div");
div2.innerHTML = `<button onclick=test("x2","y2")>div2</button>`;
document.body.appendChild(div1);
document.body.appendChild(div2);
</script>
可以发现div1按钮点击报错，而div2点击能正常运行，就是因为div1里test函数的参数间存在空格，而浏览器在解析时，会将空格当做属性的分隔符，结果导致解析错误
- 解决：不要留空格即可
网友评论