Модуль загрузки был заблокирован из-за недопустимого типа MIME ("приложение / 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 я получаю сообщение об ошибке, указанное в заголовке:

модуль из " http://localhost:8000/pkg/fstree_web_bg.wasm" был заблокирован из-за недопустимого типа MIME ("application/wasm").

Я подозревал проблемы с HTTPS или локальным хостом, поэтому дополнительно попробовал 127.0.0.1, и даже попробовал туннель https://***.ngrok.io, а Firefox по-прежнему отклоняет загрузку модуля wasm с этим сообщением об ошибке.

Он ссылается на статью MDN о X-Content-Type-Options, но я не уверен, насколько это актуально. Мой сервер уже отправляетContent-Type: application/wasm.

Код JavaScript, сгенерированный wasm-pack, начинается так:

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 еще не стандартизирован. Вы должны установить--target аргумент wasm-pack к web для создания JavaScript для использования в браузере.

Answer 2

Я не уверен, есть ли у вас та же проблема, что и у меня (попытка выполнить учебник без использования js-bundler), но я, наконец, заставил его работать на моем конце.

Попытка попытаться получить ручку на *.wasmфайл, который вы создали, уже позаботился о --target webпараметр, поэтому вам фактически не нужно импортировать *_bg.wasmфайл, но поскольку объект (я еще не совсем уверен, что это такое) на самом деле возвращается init()функция.

Поэтому, если вы хотите продолжать использовать wasmсправиться, просто сделайте:

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