WebAssembly InstantiateStreaming 错误的 MIME 类型

我正在尝试获取本教程（此处：https://www.hellorust.com/demos/add/index.html 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 https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API).

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

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

then

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

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

为了使这尽可能简单，我把add.wasm文件和js文件，将其导入到同一目录中，然后执行以下操作（NOTE：我正在使用 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，但我不确定并且我还没有在网上看到任何示例。

有谁知道如何让它发挥作用？

EDIT:

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

    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)
    });

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

考虑到你无法更改服务器以正确返回application/wasm for .wasm无论出于何种原因发生文件请求，您都可以通过更改实例化 WebAssembly 模块的方式来解决该问题。而不是这样做：

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

Do this:

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 类型（根据本规格 https://www.w3.org/TR/wasm-web-api-1/#streaming-modules）。相反，我打电话instantiate()通过一个ArrayBuffer并完全避免检查。