乐趣区

关于前端:加载mjs文件报错-MIME-type-of-applicationoctetstream-的解决方案

对于浏览器控制台报错 xxx.mjs 文件 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “application/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec. 问题的解决方案

第一次遇到这个问题,在应用 nuxt3 进行动态化打包后,应用 Nginx 部署好后,但浏览器控制台报错提醒:
.mjs
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “application/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec.

通过很多种形式办法的尝试,最终在一天早上忽然想到会不会是 Nginx 的问题,而后通过 Nginx 和 mjs 这两个关键词查到相似状况和解决办法。

起因

因为 nginx 无奈辨认 mjs 文件,从而在 http header 中谬误的应用 Content-Type:application/octet-stream 来传输 mjs 文件,导致浏览器端认为它不是一个非法的 js 脚本

解决方案

批改 nginx 的 MIME type 文件,批改对应的 MIME type 与 mjs 的映射,操作如下:

去 nginx 配置文件中发现 mimetype 文件门路为  /etc/nginx/mime.types

关上 mime.types 文件

sudo vim /etc/nginx/mime.types

找到如下配置内容

application/javascript                 js;

批改为

application/javascript                 js mjs;

而后重启 Nginx

sudo nginx -s reload

再次拜访发现网页没有报错,能够失常运行(如还有报错可尝试强刷或革除缓存后再试)

为什么要再发一篇文章?

第一次遇到这种问题,最间接的方法就是百度和谷歌,间接把浏览器报错信息百度一下,后果查出来的内容都是 vue 的打包配置谬误或其它不匹配的问题,搜不到和我状况相似的问题和解决方案,防止后续遇到相似问题的同学因为搜寻关键词谬误找不到答案浪费时间,所以改个题目再发一遍。

解决方案原文链接!

https://blog.51cto.com/u_1305…

退出移动版