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

Question

我正在尝试创建一个 Rust WebAssembly 项目并修改了 rust-webpack-template 作为我的起点。该模板是一个带有 JavaScript 文件的 webpack 项目，该文件调用单个 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 构建项目并尝试直接托管生成的文件时，没有显示任何内容并且浏览器控制台显示错误：

Error importing 'index.js': TypeError: "Response has unsupported MIME type"

此错误来自 bootstrap.js 中的代码，但我不完全确定它的含义或如何修复此错误。

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

Answer 1

正如 Shepmaster 帮助我在评论中弄清楚的那样，当浏览器期望它是 application/wasm 时，.wasm 文件的 MIME 类型被设置为 application/octet-stream。

我正在使用一个简单的 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 will handle .wasm files correctly after version 4.17. It works correctly in webpack dev server because they implemented their own workaround 他们在等待快递中的修复。

Answer 2

我在使用 Flask 时遇到了类似的问题 ("Response has unsupported MIME type")。问题是我没有到 .wasm 文件的单独路径。例如：

@app.route('/path/to/file.wasm')
def wasm_file():
    return send_file('/path/to/file.wasm', mimetype = 'application/wasm');

这不是这个问题的答案，但对其他有类似问题的人来说是一个提示。

Answer 3

我也遇到了这个问题，导致我更改我的 .htaccess 文件（我使用 Apache 托管我的本地服务器）以包含以下内容： AddType application/wasm wasm

如果错误仍然存在，并且您在使用 WebAssembly.instantiateStreaming 时遇到此错误，这个相关问题可能有解释和解决方法：WebAssembly InstantiateStreaming Wrong MIME type

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

Why do I get the error "Response has unsupported MIME type" after bundling Wasm together, but not when serving with the webpack dev server?

javascript

rust

webpack

webassembly