TypeError：无法在“WebAssembly”上执行“编译”：响应 MIME 类型不正确。预期的“应用程序/wasm”

Posted

技术标签:

【中文标题】TypeError：无法在“WebAssembly”上执行“编译”：响应 MIME 类型不正确。预期的“应用程序/wasm”【英文标题】：TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm' 【发布时间】：2018-11-08 09:18:51 【问题描述】：

我正在尝试使用 Chrome 上的 fetch api 加载 .wasm 文件，并使用 express 提供 html 文件。但是chrome不允许我加载文件：

'Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': 不正确的响应 MIME 类型。预期的“应用程序/wasm”。'

这是我的文件：

/public/index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
          WebAssembly.instantiateStreaming(fetch('http://localhost:3000/simple.wasm'))
      .then(obj => 
       console.log(obj.instance.exports.add(1, 2));  // "3"
      );
    </script>
  </body>
</html>

快递服务：

/index.js

const express = require('express')
express.static.mime.define('application/wasm': ['wasm'])
var app = express();

app.use('/', express.static('public'));

app.listen(3000, function () 
  console.log('Example app listening on port 3000!')
)

我可以在提供 .wasm 文件时添加一个新的 mime 类型来表达吗？ 还是让chrome接受？ 我不知道如何解决它^^

见：http://kripken.github.io/emscripten-site/docs/compiling/WebAssembly.html

Web server setup
To serve wasm in the most efficient way over the network, make sure your web server has the proper MIME time for .wasm files, which is application/wasm. That will allow streaming compilation, where the browser can start to compile code as it downloads.

In Apache, you can do this with

AddType application/wasm .wasm
Also make sure that gzip is enabled:

AddOutputFilterByType DEFLATE application/wasm

谢谢大家！

【问题讨论】：

【参考方案1】：

一种可能的解决方法是使用instantiate() 而不是instantiateStreaming()，因为前者不关心MIME 类型（而后者does）。使用instantiate()：

async function fetchAndInstantiate() 
    const response = await fetch("http://localhost:3000/simple.wasm");
    const buffer = await response.arrayBuffer();
    const obj = await WebAssembly.instantiate(buffer);
    console.log(obj.instance.exports.add(1, 2));  // "3"

【讨论】：

但是流媒体更快:( 是吗？您是否有任何数据支持该论点，或者您只是依赖于一般流式传输的想法，您可以在完成下载之前开始处理它？如果是这种情况，我认为这不会产生任何重大影响，除非您的 wasm 文件非常大。 @CarlSmith 不确定您是否习惯 Javascript，但这里隐含的是您必须在 async 函数中运行上面的代码。以防万一，我将编辑答案以添加它。 @Lucio Palva - async 和 await 关键字是新的并且非常先进，所以我会很感激。谢谢。 developer.mozilla.org/en-US/docs/WebAssembly/…@LucioPaiva【参考方案2】：

快速搜索给了我这个答案

express.static.mime.define('application/octet-stream': ['csv'])

来自here

【讨论】：

【参考方案3】：

原因是node.js express.js服务器无法识别文件类型.wasm

所以它默认将响应头设置为 application/octet-stream

启用 express.js 识别 .wasm 文件，

更新 type-is 版本到 1.6.16 + 因为 1.6.16 添加支持 .wasm 文件

但是如何让它工作呢？分享我的工作示例：

1)现在安装type-is，运行

      npm install type-is

确保 package.json type-is 版本为 1.6.18

2) 确保您的 express.js 版本是 4.17，如果不是 通过修改 package.json 文件将 express.js 从 4.15 更新到 4.17， 如图所示将 4.15 更改为 4.17

然后运行 npm install express

4.15 不支持 type-is，所以必须升级到 4.17

app.js 文件添加日志，输出当前运行的 express 版本 只要确保它是 4.17

现在我的 express.js 通过响应正确的标头内容类型 application/wasm 支持 .wasm 文件

【讨论】：

【参考方案4】：

也许 github 上 Express 的 the issue 会有所帮助。

您只需要等待新的快递发布即可。

或者试试the solution provided by lynncyrin（这对我没有帮助。）

【讨论】：

以上是关于TypeError：无法在“WebAssembly”上执行“编译”：响应 MIME 类型不正确。预期的“应用程序/wasm”的主要内容，如果未能解决你的问题，请参考以下文章

小程序报Unhandled promise rejection TypeError: WebAssembly.instantiate(): Argument 0 must be a buffer错误

小程序报Unhandled promise rejection TypeError: WebAssembly.instantiate(): Argument 0 must be a buffer错误

无法使用从 WebAssembly 模块导出的函数？

Blazor WebAssembly FetchData 无法在 SQL Server 上运行

无法使用 wasmer 执行独立的 webassembly 文件

toDataURL() 无法在 Blazor Webassembly 中使用 JS 互操作保存 HTML5 画布的内容？