如何解决Nginx部署Vite构建的FFmpeg.wasm SharedArrayBuffer错误

排查步骤 #

1. 验证响应头是否正确生效
   打开浏览器开发者工具的Network面板，查看页面主文档、ffmpeg-core.js、ffmpeg-core.worker.js以及相关资源的响应头，确认同时存在以下两个头：
   • Cross-Origin-Opener-Policy: same-origin
   • Cross-Origin-Embedder-Policy: require-corp
     注意：如果任意一个资源缺少这两个头，都会导致SharedArrayBuffer无法使用。

修复方案 #

1. 修正Nginx的响应头配置 #

Nginx默认仅在成功状态码（如200）时添加add_header，对于304（缓存）等状态码不会生效。需要添加always参数确保所有响应都带上必要的头，同时移除冲突的跨域配置：

server {
    listen 80;
    server_name ...你的IP;

    # 确保所有响应都携带关键头
    add_header 'Cross-Origin-Opener-Policy' 'same-origin' always;
    add_header 'Cross-Origin-Embedder-Policy' 'require-corp' always;

    # 移除冲突的跨域头（同域部署无需这些）
    # add_header 'Cross-Origin-Resource-Policy' "cross-origin";
    # add_header 'Access-Control-Allow-Origin' '*';

    location / {
        root /www/audioserver/dist;
        # 无需重复添加头，server块的配置已覆盖
    }
    ...
}

修改后重启Nginx：nginx -s reload

2. 调整FFmpeg.wasm的加载逻辑 #

尝试去掉不必要的toBlobURL转换，直接使用原始资源URL（仅保留IndexedDB缓存wasm的Blob URL处理）：

const blob = await getWasmCoreWasm();
await this.ffmpegInstance.load({
    coreURL: `${baseURL}/ffmpeg-core.js`,
    wasmURL: URL.createObjectURL(blob),
    workerURL: `${baseURL}/ffmpeg-core.worker.js`,
});

如果toBlobURL是用于处理缓存或跨域，需要确认其实现是否符合COEP策略——避免将同域资源转成Blob URL后触发跨源检查。

3. 清除浏览器缓存 #

浏览器可能缓存了旧的响应头，按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，或者在开发者工具中勾选“禁用缓存”后重新加载。

4. 检查页面中的跨源资源 #

如果页面中引入了其他域名的资源（如第三方脚本、图片），这些资源必须满足COEP要求：

• 要么资源所在服务器返回Cross-Origin-Resource-Policy: same-origin或cross-origin头
• 要么通过CORS加载，且服务器返回的Access-Control-Allow-Origin为当前域名（不能是*）

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