由于不允许的 MIME 类型，无法加载模块脚本

Posted 2023-03-15

【中文标题】由于不允许的 MIME 类型，无法加载模块脚本

【英文标题】：Failed to load module script because of a disallowed MIME type

【发布时间】：2020-04-22 22:21:03

【问题描述】：

考虑以下文件结构和内容：

js
└─ test
    ├─ modules
    │  └─ math.mjs
    └─ main.mjs

_{ma​​th.mjs:}

export function square(v)  return v * v; 

_{ma​​in.mjs:}

import  square  from './modules/math.mjs';
console.log(square(2));

---

在http://server.local/module-test（通过 Apache Web 服务器）的一个简单页面上，我正在尝试加载main.mjs：

<script type="module" src="http://server.local/js/test/main.mjs"></script>

但浏览器不断抱怨 MIME 类型，例如：

加载模块脚本失败：服务器以非 javascript MIME 类型“”响应。根据 html 规范对模块脚本强制执行严格的 MIME 类型检查。

我在import 声明中尝试了其他相对引用（通过/、./ 和../）但无济于事！

那么，我错过了什么让它工作？

【问题讨论】：

将服务器配置为使用适当的 javascript MIME 类型提供 .mjs 文件，或者只是尝试使用 .js 文件扩展名。

【参考方案1】：

浏览器加载模块的条件之一是服务器为模块提供 MIME 类型 application/javascript（或其他适当的 MIME 类型，具体取决于语言和浏览器支持；有一个新类型 @987654322 @ 用于具有混合支持的 javascript 模块）。这意味着配置服务器提供一个响应标头，其中至少包含用于 javascript 模块（或一般的 javascript）的 Content-Type: application/javascript。

根据您收到的错误，您的服务器似乎要么提供一个空的 Content-Type 标头，要么根本不提供它。这通常发生在尝试从 file:// url 加载模块时，没有服务器，但可能发生在配置错误的服务器上。

文件扩展名.mjs 可能无法被服务器识别，因此无法使用正确的 MIME 类型提供服务。

【参考方案2】：

我的主机上的 Web 服务器也遇到了同样的问题。许多网络服务器显然还不支持“.mjs”。另见：https://github.com/GeoffreyBooth/js-mjs-mime-type-test

因此，如果服务器没有以正确的 MIME-Type 响应 .mjs 或其他文件，您可以在 .htaccess 中添加此类型

<IfModule mod_mime.c>
  AddType text/javascript mjs
</IfModule>

这解决了我的问题。