WebAssembly InstantiateStreaming错误的MIME类型 [英] WebAssembly InstantiateStreaming Wrong MIME type

问题描述

我正在尝试获取本教程(此处: https://www.hellorust. com/demos/add/index.html )正常运行，看来无论如何，我都无法使WebAssembly MDN保留功能正常运行.

I am attempting to get this tutorial (here: https://www.hellorust.com/demos/add/index.html) to work, and it seems that whatever I do, I cannot get the WebAssembly MDN reserved function to properly work.

因此，我按照上面链接的说明进行操作，并获得了一个add.wasm文件.据我所知，这应该很简单并且应该可行.经过一番挖掘后，我发现最新的WebAssembly模块将实例化流-可在此处找到其文档:( https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API ).

So, I followed the instructions on the link above and got an add.wasm file. As far as I can tell this should be fairly simple and should work. After a little digging I found that the newest WebAssembly module is to instantiate streaming - the documentation for which can be found here: (https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API).

MDN示例说明要执行以下操作:

The MDN example says to do the following:

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

然后

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

根据MDN，importObject用于解开嵌套参数.很奇怪，但是还可以.

According to MDN the importObject is to unwrap the nested argument. Weird, but OK.

为使此过程尽可能简单，我将要导入该文件的add.wasm文件和js文件放在同一目录中，然后执行以下操作(注意:我正在使用Vue .js，但对于熟悉SPA的任何人(例如库)，这应该是相似的):

To make this as simple as possible I put the add.wasm file and the js file that would import it in the same directory and then did then following (NOTE: I am using Vue.js, but for anyone familiar with SPA like libraries this should be similar):

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记录到控制台.似乎没有任何作用.

I've tried not adding the header to the fetch request, using fetch(add.wasm), dropping the window., dropping the importObject entirely and simple logging obj to console. Nothing appears to work.

如果不受广泛支持，可能必须以某种方式将application/wasm字段添加到webpack中，但是我不确定，也没有在线看到任何示例.

It may be that I have to add the application/wasm field to webpack somehow if it is not widely supported, but I'm not sure and I haven't seen any examples online.

有人知道如何使它正常工作吗?

Does anyone know how to get this to work?

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

Someone suggested that since this was a fetch request it had to be making the request from a backend server. This made sense to me, so I did the following:

    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)，但我不确定为什么.

Where http://localhost:8000/files/{someFile} is a backend route that serves my files (which I made sure to put add.wasm in of course). Unfortunately, I get the same error (i.e. unrecognized MIME type) and I'm not sure why.

推荐答案

考虑到您出于任何原因都无法更改服务器以针对.wasm文件请求正确返回application/wasm，可以通过更改实例化WebAssembly模块的方式.而不是这样做:

Considering you can't change the server to properly return application/wasm for .wasm file requests for any reason, you can work around the issue by changing the way you instantiate the WebAssembly module. Instead of doing this:

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()等效.

Or the equivalent using then() if you cannot use async/await.

实际上，我的解决方法是避免调用instantiateStreaming()，该文件必须在继续之前检查服务器返回的MIME类型(根据

In practice, what my workaround does is to avoid calling instantiateStreaming(), which must check the MIME type returned by the server before proceeding (according to this specification). Instead, I call instantiate() passing an ArrayBuffer and avoid the check altogether.

这篇关于WebAssembly InstantiateStreaming错误的MIME类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！