WebAssembly InstantiateStreaming错误的MIME类型

Question

我正在尝试使本教程（在这里：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），但我不确定为什么。

Answer 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();

或等效 using then()if you can't use async/await.

在实践中，我的解决方法是避免调用instantiateStreaming()，它必须在继续之前检查服务器返回的 MIME 类型（根据本规范）。相反，我调用instantiate()通过ArrayBuffer并完全避免检查。