使用 FFmpeg wasm 和 setupProxy.js 时出现“ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep” - Reactjs

Question

我在我的 React 应用程序中使用 FFmpeg wasm 并解决 sharedarraybuffer 未定义错误，我必须在我的 React 应用程序中添加以下文件： src\setupProxy.js

module.exports = (app) => {
  app.use((_, res, next) => {
    res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
    res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
    next();
  });
};

我能够加载并运行 FFmpeg wasm，但现在当我从 firestore 等资源获取图像或视频时，出现以下错误：

net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

或

net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 307

---

我尝试将跨域添加到

<img>

元素然后我得到这个：

从源“http://localhost:3000”访问“https://firebasestorage.googleapis.com/xxxx”的图像已被 CORS 策略阻止：不存在“Access-Control-Allow-Origin”标头关于所请求的资源。

---

这有帮助吗？ 手动配置代理

Answer 1

你已经做了所有你能做的，Google api 的响应必须设置 'Access-Control-Allow-Origin' 标头以允许 http://localhost:3000 或 '*'。

为开发服务器设置代理可能可以防止开发环境中出现错误，但并不能解决部署到生产时的问题。

Answer 2

你有想到什么吗？我尝试在 nuxt3/vue 应用程序中使用 ffmpeg 时遇到了同样的问题。