Question

我正在尝试使用Chrome上的fetch api加载.wasm文件，并使用express提供html文件。但是chrome不允许我加载文件：

'未捕获（承诺）TypeError：无法在'WebAssembly'上执行'compile'：错误的响应MIME类型。预期'application / wasm'。'

这是我的档案：

/public/index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
          WebAssembly.instantiateStreaming(fetch('http://localhost:3000/simple.wasm'))
      .then(obj => {
       console.log(obj.instance.exports.add(1, 2));  // "3"
      });
    </script>
  </body>
</html>

快递：

/index.js

const express = require('express')
express.static.mime.define({'application/wasm': ['wasm']})
var app = express();

app.use('/', express.static('public'));

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

我可以在提供.wasm文件时添加新的mime类型吗？或允许铬接受它？我对如何解决它没有任何想法^^

请参阅：http://kripken.github.io/emscripten-site/docs/compiling/WebAssembly.html

Web server setup
To serve wasm in the most efficient way over the network, make sure your web server has the proper MIME time for .wasm files, which is application/wasm. That will allow streaming compilation, where the browser can start to compile code as it downloads.

In Apache, you can do this with

AddType application/wasm .wasm
Also make sure that gzip is enabled:

AddOutputFilterByType DEFLATE application/wasm

谢谢大家！

Answer 1

一个可能的解决方法是使用instantiate()代替instantiateStreaming()，因为前者不关心MIME类型（而后者关心does）。要使用instantiate()：

const response = await fetch("http://localhost:3000/simple.wasm");
const buffer = await response.arrayBuffer();
const obj = await WebAssembly.instantiate(buffer);
console.log(obj.instance.exports.add(1, 2));  // "3"

Answer 2

快速搜索给了我这个答案

express.static.mime.define（{＆＃39; application / octet-stream＆＃39;：[＆＃39; csv＆＃39;]}）

来自here

Answer 3

原因是，node.js express.js服务器无法重新识别文件类型.wasm

因此，默认情况下，它将响应标头设置为application / octet-stream

启用express.js识别.wasm文件，

将type-is更新为1.6.16 + 因为1.6.16添加了支持.wasm文件

但是如何使其起作用？分享我的工作示例：

1）现在安装type-is，运行

            <v-select
              dense
              :items="merchants"
              item-text="name"
              item-value="id"
              name="merchants"
              v-model="editedItem.merchants"
              return-object
            >
            </v-select>

确保package.json类型为1.6.18

2）确保您的express.js版本为4.17（如果不是）通过修改package.json文件将express.js从4.15更新到4.17，如图所示将4.15更改为4.17

然后运行 npm install express

4.15不支持type-is，因此必须升级到4.17

app.js文件添加日志，输出当前运行的Express版本只要确保它是4.17

现在我的express.js通过响应正确的标题内容类型application / wasm支持.wasm文件

Answer 4

也许github上的Express the issue会有所帮助。

你只需要等待新的快递发布。

或尝试the solution provided by lynncyrin（这对我没用。）

TypeError：无法在'WebAssembly'上执行'compile'：错误的响应MIME类型。预期'application / wasm'

4 个答案: