由于不允许的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 Web服务器），我正在尝试加载main.mjs：

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

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

无法加载模块脚本：服务器以非JavaScript MIME类型“”进行了响应。根据HTML规范对模块脚本强制执行严格的MIME类型检查。

我在/语句上尝试了其他路径（例如：尝试了绝对路径（../，使用了./，import等）！

所以，我想让它正常工作是什么？

Answer 1

浏览器要加载模块的条件之一是，服务器使用MIME类型为application/javascript（或其他适当的MIME类型，具体取决于语言和浏览器支持；为该模块提供服务；新类型为javascript/esm对于越来越受欢迎的javascript模块）。这意味着配置服务器将提供一个响应标头，该标头至少应包含javascript模块（或一般来说是javascript）的Content-Type: application/javascript。

根据您收到的错误，似乎您的服务器正在提供一个空的Content-Type标头，或者根本不提供它。当尝试从file://网址加载模块而没有服务器时，通常会发生这种情况，但是如果服务器配置错误，则会发生这种情况。

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