由于不允许的 MIME 类型（“application/wasm”），加载模块被阻止

Question

我提供静态文件服务器（通过 HTTP），其中包含 wasm-pack 生成的数据。使用 rustwasm 书中的示例，我将这段代码添加到我的索引 HTML 页面：

        <script type="module">
            import init from "./pkg/fstree_web.js";

            async function run() {
                await init();
            }

            run();
        </script>

但是，在 Firefox 上，我收到如标题所示的错误消息：

module from “http://localhost:8000/pkg/fstree_web_bg.wasm” was blocked because of a disallowed MIME type (“application/wasm”).

我怀疑是 HTTPS 问题或本地主机问题，所以我额外尝试了 127.0.0.1，甚至尝试了 https://***.ngrok.io 隧道，Firefox 仍然拒绝加载 wasm 模块出现此错误消息。

它链接到一篇关于 X-Content-Type-Options 的 MDN 文章，但我不确定它是如何相关的。我的服务器已经在发送 Content-Type: application/wasm.

wasm-pack生成的JavaScript代码是这样开头的：

import { __cargo_web_snippet_72fc447820458c720c68d0d8e078ede631edd723 } from './snippets/stdweb-bb142200b065bd55/inline133.js';
import { __cargo_web_snippet_97495987af1720d8a9a923fa4683a7b683e3acd6 } from './snippets/stdweb-bb142200b065bd55/inline134.js';
import { __cargo_web_snippet_dc2fd915bd92f9e9c6a3bd15174f1414eee3dbaf } from './snippets/stdweb-bb142200b065bd55/inline135.js';
import { __cargo_web_snippet_1c30acb32a1994a07c75e804ae9855b43f191d63 } from './snippets/stdweb-bb142200b065bd55/inline136.js';
import { wasm_bindgen_initialize } from './snippets/stdweb-bb142200b065bd55/inline293.js';
import * as wasm from './fstree_web_bg.wasm';

Firefox 是否要我将 *.wasm 作为 application/javascript 发送？或者哪里出了问题？

Answer 1

WebAssembly 模块的导入尚未标准化。您应该将 wasm-pack 的 --target 参数设置为 web 以生成 JavaScript 以在浏览器中使用。

Answer 2

我不确定你 have/had 是否和我有同样的问题（尝试在不使用 js-bundler 的情况下完成本教程），但我终于成功了。

尝试获取您生成的 *.wasm 文件的句柄已由 --target web 参数处理，因此您实际上不需要导入 *_bg.wasm 文件，但由于 wasm 对象（我还不太确定，这是什么）实际上是由 init() 函数返回的。

因此，如果您想继续使用 wasm 句柄，只需执行以下操作：

// Near imports worked for me, but choose your own scope
let wasm;
.
.
.
// instead of await init();
wasm = await init();

由于不允许的 MIME 类型（“application/wasm”），加载模块被阻止

Loading module was blocked because of a disallowed MIME type (“application/wasm”)

javascript

rust

webassembly

wasm-pack

x-content-type-options