[JavaScript] MIME type 异常

最近项目中引入了vite作为构建工具，开发效率得到进一步提升。

但最后输出静态文件时，发现了一个异常。用户在请求js文件时，浏览器报出以下错误提示：

Expected A Javascript Module Script But The Server Responded With A Mime Type Of “text/plain”. Strict Mime Type Checking Is Enforced For Module Scripts Per Html Spec

字面的意思是，这里请求的是一个 Javascript Module Script， 但服务器却告诉我它返回的是一个 “text/plain”，所以我不会执行这个文件。

我们去看一下vite生成的静态文件，可以看到这里的js 都有一个 type="module"属性。

 <script type="module" crossorigin src="/static/assets/index.332b0663.js"></script>

这代表着，我们正在使用现代JavaScript的 模块 功能。现代主流浏览器已经支持模块 语法，这就省去了原先的打包过程，所以vite才这么快。可以看出vite输出的js文件开头几乎都有 import 语句，

import{a as b,Q as v,b as w,_ as y,c as k,d as C}from"./logo.e0f0da63.js";

而原先使用webpack等打包工具时，输出的结果里有大量的bundle.js

<script src="bundle.js"></script>

如果不考虑兼容性，可以直接使用前面的方式，这样能获得更好的性能。

回到问题

由于之前没有用到 模块 功能，所以服务器将js静态文件的类型返回为“text/plain”是没有问题的。
现在需要用到 模块 功能，那么怎么才能让服务器返回合适的值呢？

应该返回什么

这方面，MDN是权威，可以看到，标准上说 js 模块 应该以 .mjs 结尾。但目前vite打包出来的仍然是.js文件。

那么我们看.js应该是什么 MIME 类型。标准上说，应该返回 text/javascript 的类型。

怎么修改返回值

后端是Django的runserver服务，我们去Django官网看到下面一段话

Note
To guess the served files’ content types, this view relies on the mimetypes module from the Python standard library, which itself relies on the underlying platform’s map files. If you find that this view doesn’t return proper content types for certain files, it is most likely that the platform’s map files are incorrect or need to be updated. This can be achieved, for example, by installing or updating the mailcap package on a Red Hat distribution, mime-support on a Debian distribution, or by editing the keys under HKEY_CLASSES_ROOT in the Windows registry.

意思是，runserver服务返回的 mimetypes 是平台定义的，如果不合适的话，需要自己去修改。在windows里可以修改 HKEY_CLASSES_ROOT 注册表。

解决办法

打开注册表，修改HKEY_CLASSES_ROOT 下.js对应的mimetypes值为 text/javascript 即可。