javascript - WebAssembly InstantiateStreaming错误的MIME类型

我正在尝试使本教程(在这里: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记录到控制台简单地不将 header 添加到获取请求中。似乎没有任何作用。

如果它不受广泛支持，可能必须以某种方式将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)，我不确定为什么。

最佳答案

考虑到由于任何原因您都无法更改服务器以针对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();

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

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

关于javascript - WebAssembly InstantiateStreaming错误的MIME类型，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52239924/