部署Rust WASM应用至Github Pages遇MIME类型错误求助

问题描述 #

使用macro-quad和JavaScript Canvas开发的Rust WASM应用，本地通过cargo build --release --target wasm32-unknown-unknown && cp target/wasm32-unknown-unknown/release/mini_spreadsheet.wasm . && basic-http-server .运行正常，但部署到Github Pages后出现错误：

TypeError: WebAssembly: Response has unsupported MIME type 'text/html; charset=utf-8' expected 'application/wasm'

原配置文件如下：

原deploy.yml #

name: Build and Deploy
on:
  push:
    branches:
      - master

permissions:
  contents: write
  pages: write
  
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Install Rust
        uses: actions-rs/toolchain@v1
        with:
          toolchain: stable
          target: wasm32-unknown-unknown
          override: true

      - name: Build
        run: cargo build --release --target wasm32-unknown-unknown

      - name: Prepare Deployment Directory
        run: |
          mkdir -p ./deploy/fonts
          cp ./target/wasm32-unknown-unknown/release/mini_spreadsheet.wasm ./deploy/
          cp index.html ./deploy/
          cp -r fonts/ ./deploy/fonts/

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./deploy

原index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Spreadsheet</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: lightgray;
      }
    </style>
  </head>
  <body>
    <div class="canvas-container">
      <canvas id="glcanvas" tabindex="1"></canvas>
    </div>
    <script src="https://not-fl3.github.io/miniquad-samples/mq_js_bundle.js"></script>
    <script>
      load("mini_spreadsheet.wasm");
    </script>
  </body>
</html>

解决方案 #

报错原因是Github Pages默认未给.wasm文件设置正确的MIME类型，导致浏览器将其识别为HTML。以下两种方法可解决：

方法1：添加_headers文件指定MIME类型 #

1. 在项目根目录创建_headers文件，内容：

/*.wasm
  Content-Type: application/wasm

2. 修改deploy.yml中的Prepare Deployment Directory步骤，将_headers复制到部署目录：

- name: Prepare Deployment Directory
  run: |
    mkdir -p ./deploy/fonts
    cp ./target/wasm32-unknown-unknown/release/mini_spreadsheet.wasm ./deploy/
    cp index.html ./deploy/
    cp -r fonts/ ./deploy/fonts/
    cp _headers ./deploy/  # 新增该行

方法2：修改index.html的WASM加载逻辑 #

调整加载脚本，通过fetch指定Accept头确保获取正确的MIME类型：

<script src="https://not-fl3.github.io/miniquad-samples/mq_js_bundle.js"></script>
<script>
  fetch('mini_spreadsheet.wasm', { headers: { 'Accept': 'application/wasm' } })
    .then(response => {
      if (!response.ok) throw new Error(`请求失败: ${response.status}`);
      return WebAssembly.instantiateStreaming(response);
    })
    .then(result => {
      window.mq_initialize(result.instance);
    })
    .catch(err => console.error('WASM加载失败:', err));
</script>

验证修改 #

推送修改后的代码，待Github Actions完成部署后，打开浏览器控制台查看.wasm文件的网络请求，确认其Content-Type为application/wasm即可。

内容的提问来源于stack exchange，提问作者Doruk