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

Question

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

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

_math.mjs:

export function square(v) { return v * v; }

_main.mjs:

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

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

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

但是浏览器一直抱怨 MIME 类型，例如：

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

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

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

Answer 1

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

从您收到的错误来看，您的服务器似乎提供了空 Content-Type header 或根本不提供。这通常发生在尝试从没有服务器的 file:// url 加载模块时，但可能会发生在 mis-configured 服务器上。

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

Answer 2

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

因此，如果服务器没有为 .mjs 或其他文件响应正确的 MIME 类型，您可以使用

在 .htaccess 中添加此类型

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

这解决了我的问题。

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

Failed to load module script because of a disallowed MIME type

javascript

import

module

mime-types