为什么将 Wasm 捆绑在一起后出现错误“响应具有不支持的 MIME 类型”，但在使用 webpack 开发服务器服务时却没有？

Question

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

导入 'index.js' 时出错：TypeError: "Response has unsupported MIME type"

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

为什么在使用 webpack 开发服务器提供服务时可以正常工作，但在将所有内容捆绑在一起后就不行？

Answer 1

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

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

Answer 2

我在使用 Flask 时遇到了类似的问题（“响应具有不受支持的 MIME 类型”）。问题是我没有有一个单独的路由到.wasm 文件。例如：

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

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

Answer 3

Shepmaster 帮助我在 cmets 中弄清楚，当浏览器期望它是 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 将在 4.17 版本之后正确处理 .wasm 文件。它在 webpack 开发服务器中正常工作，因为他们在等待 express 修复时实现了自己的 workaround。