web-dev-qa-db-fra.com

TypeError: Impossible d'exécuter 'compiler' sur 'WebAssembly': type MIME de réponse incorrect. 'Application/wasm' attendu

J'essaie de charger un fichier .wasm à l'aide de l'API fetch sur Chrome et de servir un fichier HTML à l'aide de la fonction express. Mais chrome ne me laisse pas charger le fichier: 

'Uncaught (in promise) TypeError: Impossible d'exécuter' compiler 'sur' WebAssembly ': type MIME de réponse incorrecte. 'Application/wasm' attendu.

Voici mes fichiers:

/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>

Servi par Express: 

/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!')
})

Puis-je ajouter un nouveau type de mime à exprimer lors du traitement d'un fichier .wasm? Ou permettre à chrome de l'accepter? Je n'ai aucune idée sur la façon de le résoudre ^^

Voir: 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

Merci tout le monde! 

7
Ricardo Machado

Une solution de contournement possible consiste à utiliser instantiate() au lieu de instantiateStreaming(), car le premier ne se soucie pas des types MIME (alors que le dernier fait ). Pour utiliser 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"
2
Lucio Paiva

Peut-être que le problème d’Express sur github pourrait aider.

Vous devez juste attendre la publication du nouveau courrier express.

Ou essayez la solution fournie par lynncyrin (cela ne m'aide pas.)

0
oToToT

Une recherche rapide me donne cette réponse 

express.static.mime.define ({'application/octet-stream': ['csv']})

de ici

0