javascript - 为什么将Wasm捆绑在一起后为什么会出现错误 "Response has unsupported MIME type"，但与Webpack开发服务器一起使用时却没有呢？

我正在尝试制作Rust WebAssembly项目，并已将rust-webpack-template修改为我的起点。该模板是一个webpack项目，带有一个JavaScript文件，该文件调用一个Wasm函数，Rust Wasm从那里接管。

我已经修改了模板，因为我想在JavaScript中使用主要逻辑并通过API调用Rust Wasm。

我已经将webpack条目更改为bootstrap.js，如下所示。

// bootstrap.js
import("./index.js").catch(e =>
    console.error("Error importing 'index.js':", e)
);

我添加了文件index.js，它调用了Rust Wasm函数

// index.js
import * as wasm from "../crate/pkg/rust_webpack";

const title = document.getElementById("msg");

title.innerText = wasm.get_msg();

Rust的get_msg函数如下所示:

#[wasm_bindgen]
pub fn get_msg() -> String {
    "Hello from Rust WebAssembly!".to_owned()
}

当我使用webpack-dev-server -d运行项目时，一切正常。

但是，当我使用webpack构建项目并尝试直接托管生成的文件时，没有任何显示，并且浏览器控制台显示错误:



该错误来自bootstrap.js中的代码，但我不确定是什么意思或如何解决此错误。

为什么在与webpack开发服务器一起使用时一切正常，但在将所有内容捆绑在一起后却不能正常工作？

最佳答案

正如Shepmaster帮助我在注释中指出的那样，当浏览器期望.wasm文件的MIME类型为application/octet-stream时，它的MIME类型被设置为application/wasm。

我正在使用一个简单的express服务器来托管我的文件。可以将Express配置为在一行中使用正确的MIME类型。

var express = require('express');
var app = express();

// Set the MIME type explicitly
express.static.mime.define({'application/wasm': ['wasm']});

app.use(express.static('./dist'));

app.listen(3000);

根据this issue所述，Express将在版本4.17之后正确处理.wasm文件。它在webpack开发服务器中正常工作，因为他们在等待快速修复时实现了自己的workaround。

关于javascript - 为什么将Wasm捆绑在一起后为什么会出现错误 "Response has unsupported MIME type"，但与Webpack开发服务器一起使用时却没有呢？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54316931/