"ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep" when using FFmpeg wasm and setupProxy.js - Reactjs

Question

I am using FFmpeg wasm to my react app and to solve sharedarraybuffer is not defined error i had to add this file below in my react app: 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();
  });
};

I was able to load and rum FFmpeg wasm but now when i am fetching images or video from recourses like firestore i have these error:

net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

or

net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 307

---

I tried to add crossorigin to <img> elements then i get this:

Access to image at 'https://firebasestorage.googleapis.com/xxxx' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

---

This can help? configuring-the-proxy-manually

Answer 1

You have done all what you can do, the response of Google api must set 'Access-Control-Allow-Origin' header to allow http://localhost:3000 or '*'.

Setting up the proxy for the dev server may prevent errors in the development environment, but it won't solve the problem when deploying to production.