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
函数的参数间存在空格,而浏览器在解析时,会将空格当做属性的分隔符,结果导致解析错误
- 解决:不要留空格即可