如何解决使用Nginx作为服务器时FFmpeg.wasm无法正常工作SharedArrayBuffer错误以及使用Vite没有错误的问题？

Question

我正在使用 FFmpeg.wasm 进行一些前端转码工作。我知道由于某些浏览器政策，我需要在 Vite 服务器选项中配置一些响应标头：

 server: { headers: { 'Cross-Origin-Opener-Policy': 'same-origin', 'Cross-Origin-Embedder-Policy': 'require-corp' } },

这工作正常并且不会抛出 SharedArrayBuffer 错误。

然后，我运行yarn run build来生成dist目录并将其复制到我的Nginx代理服务器。我还在 Nginx 中配置了类似的响应标头，如下所示：

  server {
    listen 80;
    server_name ...My IP;
    add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
    add_header 'Cross-Origin-Opener-Policy' 'same-origin';
    add_header 'Cross-Origin-Resource-Policy' "cross-origin";
    add_header 'Access-Control-Allow-Origin' '*';
  
    location / {
        add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
        add_header 'Cross-Origin-Opener-Policy' 'same-origin';
    }

    root /www/audioserver/dist;
    ...
    }

但是，它在此设置中不起作用。我已经尝试了一段时间但未能解决。

这是我加载 ffmpeg.wasm 的代码。在开发环境下运行良好。 blob是保存在IndexedDB中的wasm的缓存文件：

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

我尝试过检查链接的响应头，更新Nginx，甚至修改FFmpeg的版本。他们似乎都很好，但我不知道如何解决这个问题。如果有人能帮助我，我将非常感激。非常感谢！

Answer 1

当我使用 https 而使用 http 时，我终于解决了这个问题。