本地文件中的 ES6 模块 - 服务器以非 JavaScript MIME 类型响应

Question

我收到此错误：

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

该项目从本地文件运行，例如： file:///D:/path/project.html 。

在 Firefox 中运行没有问题，但在 Google Chrome 中不起作用。我想出于开发目的以这种方式对其进行测试 - 它比创建服务器并记住它所在的端口更舒服。

原文由 Tomáš Zato 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您收到此错误消息，则表示这不是同源问题。

如错误消息中所述，真正的问题是模块脚本要求脚本文件的 MIME 是 javascript MIME 类型之一。

您的文件系统不提供任何 MIME，因此加载失败。

所以最好的解决方案显然是在本地服务器上运行代码，而不是在文件系统上。

但是既然你坚持;) 一个解决方法是首先使用 XHR ( fetch 不能用于 file:// 协议) 将你的脚本文件作为 Blob 获取，然后强制其 type 属性是 js MIME 之一，并将你的 <script> 的 src 设置为指向此 Blob 的 blobURI。

 // requires to start chrome with the --allow-file-access-from-file flag
var xhr = new XMLHttpRequest();
xhr.onload = e => {
    let blob = xhr.response;
    blob.type = 'application/javascript'; // force the MIME
    moduleScript.src = URL.createObjectURL(blob);
};
xhr.open('get', "yourmodule.js");
xhr.responseType = 'blob';
xhr.send();

但是，您将无法 import 模块中的任何依赖项。

原文由 Kaiido 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

此处未列出的对我来说的简单修复是：

我有一个 import 语句从不同的文件中引入一个对象，这是我通过这一行完成的：

import { Cell } from './modules/Cell';

破坏代码并导致 MIME 类型错误的原因是没有将 .js 附加到 ./modules/Cell 的末尾。

更新的行解决了我的问题：

import { Cell } from './modules/Cell.js';

原文由 James Gould 发布，翻译遵循 CC BY-SA 3.0 许可协议