Question

我正在尝试制作一个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构建项目并尝试直接托管生成的文件时，没有任何显示，并且浏览器控制台显示错误：

导入'index.js'时出错：TypeError：“响应具有不受支持的MIME类型”

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

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

Answer 1

正如Shepmaster帮助我在注释中指出的那样，当浏览器期望.wasm文件的MIME类型为application/octet-stream时，.wasm文件的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。

Answer 2

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

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

Answer 3

我与Flask有类似的问题（“响应的MIME类型不受支持”）。问题是我没有没有到.wasm文件的单独路由。例如：

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

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

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

3 个答案: