加载.mjs文件报错 MIME type of "application/octet-stream

关于浏览器控制台报错 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部署好后，但浏览器控制台报错提示：.mjsFailed 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...