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

Question

我收到此错误：

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

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

在 Firefox 中运行没有问题，但在 Google Chrome 中无法运行。我想以这种方式测试它以用于开发目的 - 它比创建服务器并记住它在哪个端口上更舒服。

Answer 1

将这一行添加到 apache mime types 文件配置中，我解决了同样的问题：

AddType aplication/javascript .js

我希望这会有所帮助。

Answer 2

如果文件结尾不是“.js”而是“.mjs”，请尝试将它们更改为“.js”

如果您没有指定文件类型，请指定它：./modules/Cell 到 ./modules/Cell.js

Answer 3

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

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

Answer 4

这里没有列出的一个简单的解决方法是：

我有一个 import 语句从另一个文件中引入一个对象，我通过这一行做到了：

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

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

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

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

Answer 5

您可以将ModuleSpecifier 设置为data URI

<script type="module">
  import {Test} from "data:application/javascript,const%20Mod={this.abc=123};export%20{Mod};";
  console.log(Test);
</script>

要以编程方式设置ModuleSpecifier，您可以使用--allow-file-access-from-files 标志启动Chromium/Chrome，并利用XMLHttpRequest() 从file: 协议请求JavaScript 文件

<script>
(async() => {

  const requestModule = ({url, dataURL = true}) => 
    new Promise((resolve, reject) => {
      const request = new XMLHttpRequest();
      const reader = new FileReader();
      reader.onload = () => { resolve(reader.result) };
      request.open("GET", url);
      request.responseType = "blob";
      request.onload = () => { reader[dataURL ? "readAsDataURL" : "readAsText"](request.response) };
      request.send();
   })

  let moduleName = `Mod`;
  // get `Mod` module
  let moduleRequest = await requestModule({url:"exports.js"});
  // do stuff with `Mod`; e.g., `console.log(Mod)`
  let moduleBody = await requestModule({url:"ModBody.js", dataURL: false}); 
  let scriptModule = `import {${moduleName}} from "${moduleRequest}"; ${moduleBody}`;
  let script = document.createElement("script");
  script.type = "module";
  script.textContent = scriptModule;
  document.body.appendChild(script);

})();
</script>

Answer 6

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

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

Answer 7

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

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

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

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

但既然你坚持;) 一种解决方法是首先使用 XHR 将脚本文件作为 Blob 获取（fetch 不能用于 file:// 协议），然后强制其 @ 987654324@ 属性为 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 模块内的任何依赖项。