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

Question

我收到此错误:

无法加载模块脚本:服务器使用非JavaScript MIME类型""进行响应.对每个HTML规范的模块脚本强制执行严格的MIME类型检查.

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

在Firefox中没有问题,但在谷歌浏览器中不起作用.我想以这种方式进行测试以用于开发目的 - 它比创建服务器并记住它所在的端口更舒服.

Answer 1

我这里没有列出一个简单的修复方法:

我有一个import语句带来一个来自不同文件的对象,我通过这一行做了:

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

什么打破了代码并导致MIME类型错误没有.js附加到结尾./modules/Cell.

更新的行修复了我的问题:

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

Answer 2

如果您收到此错误消息,则表示它不是同源问题.

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

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

因此,最好的解决方案显然是在本地服务器上运行代码,而不是在文件系统上运行.

但是,因为你坚持;)一个解决方法是首先使用XHR将您的脚本文件作为Blob获取(fetch不能在file://协议上使用),然后强制其type属性为js MIME之一,并将您<script>的src设置为blobURI选择这个Blob.

// 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从模块中获得任何依赖关系.

Answer 3

在 Windows 上，我无法正确加载 ES 2016 模块。即使您禁用安全性，您也会遇到下一个问题，即 .js 文件没有设置 MIME 类型，因此您会收到类似 Failed to load module script: The server responds with a non-JavaScript MIME 的消息类型 ””。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。

答案是在Macintosh上使用Safari，它允许本地文件使用ES 2016模块没有问题。有趣的是，Chrome 和 Firefox 也无法正常工作。坦率地说，这是一个错误，因为当您加载本地文件时，从同一文件夹访问文件绝对没有不安全的地方。但祝 Google 或 Firefox 好运来解决这个问题。苹果甚至在其下拉菜单中设置了有关跨脚本权限的标志，因此他们知道禁用无意义的安全内容有多么重要。

Answer 4

ES6 模块文件使用浏览器强制执行的标准同源策略限制加载，并具有许多其他安全限制，而 JavaScript“脚本”文件具有更宽松的安全性，以避免破坏现有网站，因为浏览器已添加更好的安全标准随着时间的推移。您正在点击其中之一，即必须使用正确的 MIME 类型发送文件。

file://URL 不是普通的 HTTP 请求，因此它们对请求有不同的规则。对于应该发送什么 MIME 类型也几乎没有规则。如果你想使用 ES6 模块，那么你需要在本地运行一个真正的 HTTP 服务器来为你的文件提供服务。