WebAssembly InstantiateStreaming 错误的 MIME 类型答案

【问题标题】：WebAssembly InstantiateStreaming Wrong MIME typeWebAssembly InstantiateStreaming 错误的 MIME 类型
【发布时间】：2019-02-13 20:00:20
【问题描述】：

我正在尝试使本教程（此处：https://www.hellorust.com/demos/add/index.html）工作，似乎无论我做什么，我都无法让 WebAssembly MDN 保留功能正常工作。

所以，我按照上面链接上的说明操作，得到了一个add.wasm 文件。据我所知，这应该相当简单并且应该可以工作。经过一番挖掘，我发现最新的 WebAssembly 模块是用于实例化流式传输的 - 可以在此处找到其文档：(https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)。

MDN 示例说要执行以下操作：

var importObject = {
  imports: { imported_func: arg => console.log(arg) }
};

然后

WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
.then(obj => obj.instance.exports.exported_func());

根据 MDN，importObject 是为了解开嵌套参数。很奇怪，但还可以。

为了使这尽可能简单，我将add.wasm 文件和将导入它的js 文件放在同一目录中，然后执行以下操作（注意：我使用的是 Vue .js，但对于任何熟悉 SPA 之类的库的人来说，这应该是相似的）：

window.WebAssembly.instantiateStreaming(fetch('./add.wasm', {
  headers: {
    "Content-Type": "application/wasm",
  },
}), importObject)
.then(obj => {
  console.log('inside return obj from WebAssembly initiateStreaming')
  obj => obj.instance.exports.exported_func() 
})
.catch(error=>{
  console.log('there was some error; ', error)
});

我得到的错误是：

there was some error;  TypeError: "Response has unsupported MIME type"

我尝试不将标头添加到获取请求中，使用fetch(add.wasm)，删除window.，完全删除importObject，并将obj 简单地记录到控制台。似乎没有任何效果。

如果它没有得到广泛支持，我可能必须以某种方式将 application/wasm 字段添加到 webpack，但我不确定，我还没有在网上看到任何示例。

有人知道如何让它工作吗？

编辑：

有人建议，由于这是一个获取请求，它必须从后端服务器发出请求。这对我来说很有意义，所以我做了以下事情：

    WebAssembly.instantiateStreaming(fetch('http://localhost:8000/files/add.wasm'), importObject)
    .then(obj => {
      console.log('inside return obj from WebAssembly initiateStreaming')
      obj => obj.instance.exports.exported_func()
    })
    .catch(error=>{
      console.log('there was some error; ', error)
    });

http://localhost:8000/files/{someFile} 是为我的文件提供服务的后端路由（当然，我确保将 add.wasm 放入其中）。不幸的是，我得到了同样的错误（即unrecognized MIME type），我不知道为什么。

【问题讨论】：

freenode 上##javascript 中的讨论显示 OP 正在使用 golang 的 http ServeFile 方法。
谢谢哥们！是的，如果有人知道如何更改 ServeFile 上 MIME 类型的标头，请告诉我 - 我正在研究它。
知道了 - 答案就是 snek 所说的。谢谢斯内克。

标签： javascript rust streaming fetch webassembly

【解决方案1】：

考虑到由于任何原因您无法更改服务器以正确返回 application/wasm 以处理 .wasm 文件请求，您可以通过更改实例化 WebAssembly 模块的方式来解决此问题。而不是这样做：

WebAssembly.instantiateStreaming(fetch("./add.wasm")).then(obj => /* ... */)

这样做：

const response = await fetch("add.wasm");
const buffer = await response.arrayBuffer();
const obj = await WebAssembly.instantiate(buffer);
obj.instance.exports.exported_func();

如果您不能使用async/await，则使用then() 的等效项。

实际上，我的解决方法是避免调用instantiateStreaming()，它必须在继续之前检查服务器返回的MIME 类型（根据this specification）。相反，我调用instantiate() 传递ArrayBuffer 并完全避免检查。

【讨论】：

感谢您的解决方法..但我得到了这个：CompileError：“wasm 验证错误：在偏移量 4：无法匹配幻数”
不确定是什么问题。服务器发送的 MIME 类型是什么？我建议使用 Postman 发出请求并分析响应。它可能会给你一些线索。
由于某种原因，我收到了TypeError: WebAssembly.instantiate(): Imports argument must be present and must be an object. 但是，docs 说它应该是可选的？
@Exr0n 例如，如果您使用 Golang WASM，您可以在 WebAssembly.instantiate() 调用中的 buffer 参数之后添加 go.importObject。
@Alex 你知道它是如何在 rust 中完成的吗？非常感谢:)

【解决方案2】：

there was some error; TypeError: "Response has unsupported MIME type" 您正在运行的 Web 服务器不理解/不提供 MIME 类型 application/wasm。

你可以使用rust based http server，它知道wasm MIME类型。

安装

只需使用 curl

curl -SsL https://cdn.rawgit.com/thecoshman/http/master/install.sh | sh

并执行下载的脚本，或者您可以在https://crates.io/crates/https 探索其他方法来执行相同的操作。

跑步

请使用下载的服务器来服务器您的 Web 应用程序（index.html）。例如

cd ${YOUR_APPS_PATH}

http

【讨论】：

如果这对你有用，请告诉我。 @peter-weyand

【解决方案3】：

解决方法的 sn-p 代码已在 WebAssembly Git here 上发布。不幸的是，这是一种解决方法，这违背了instantiateStreaming() 的目的，即here 被告知“效率更高”，因为解决方法需要instantiateStreaming() 有助于避免的ArrayBuffer。

【讨论】：

【解决方案4】：

James Wilson's "wasm-fractal" project 处理错误，如下所示：

importScripts("wasm_fractal.js");
delete WebAssembly.instantiateStreaming;
wasmFractal("./wasm_fractal_bg.wasm").then((wasm) => { 
  // establish connection between wasm and javascript
});

我在开发过程中使用delete WebAssembly.instantiateStreaming; 欺骗自己，因为我的编辑器的内置服务器使用不正确的 mime 类型为 wasm 提供服务。

【讨论】：