如何满足WebAssembly模块的严格MIME类型检查要求？

看起来你遇到的问题是浏览器严格的MIME类型检查导致的——虽然application/wasm是Wasm文件的正确类型，但实际服务器返回的响应头可能没有正确匹配，或者Webpack的打包逻辑干扰了文件加载路径。下面是针对你的场景的具体排查和修复方案：

1. 优先确保Express的Wasm MIME类型生效 #

你已经设置了express.static.mime.types['wasm'] = 'application/wasm'，但静态中间件可能会提前缓存MIME类型配置，导致修改不生效。可以换一种更可靠的方式，通过专门的中间件强制设置Wasm文件的Content-Type：

// 注意：这个中间件要放在静态中间件之前
app.use((req, res, next) => {
  if (req.path.endsWith('.wasm')) {
    res.setHeader('Content-Type', 'application/wasm');
  }
  next();
});

// 然后再挂载静态目录
app.use('/', express.static(__dirname));

这种方式会直接拦截所有.wasm后缀的请求，手动设置正确的MIME类型，避免全局配置失效的问题。

2. 修正Webpack的file-loader路径配置 #

你的file-loader设置了publicPath: "dist/"，但打包后的bundle.js已经位于dist目录下，这会导致浏览器请求Wasm文件时使用dist/fourd.wasm的路径——相当于请求https://localhost:8000/dist/dist/fourd.wasm，这显然是错误的。

修改为相对路径即可：

{ 
  test: /fourd\.wasm$/, 
  type: "javascript/auto", 
  loader: "file-loader", 
  options: { publicPath: "./" } 
}

这样bundle.js会以自身所在的dist目录为基准，请求./fourd.wasm，对应正确的URLhttps://localhost:8000/dist/fourd.wasm。

3. 调整Emscripten生成JS文件的加载方式 #

exports-loader可能会破坏Emscripten生成的JS文件的全局模块逻辑——这类文件通常依赖全局的Module对象来初始化Wasm。建议改用script-loader让它在全局作用域下执行：

首先安装依赖：

npm install script-loader --save-dev

然后修改Webpack规则：

{ test: /fourd\.js$/, loader: "script-loader" }

在你的src/index.js中直接引入即可：

import '../path/to/fourd.js';

// 现在可以正常访问全局的Module对象
Module.onRuntimeInitialized = () => {
  console.log('Wasm模块初始化完成');
  // 调用你的Wasm导出函数
};

4. 验证请求的正确性 #

打开浏览器开发者工具的Network标签，找到fourd.wasm的请求，确认：

• 请求URL是否指向正确的文件（没有404错误）
• 响应头的Content-Type是否为application/wasm
• 响应内容是否为Wasm二进制文件（不是文本或错误页面）

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