React中使用FFmpeg wasm与setupProxy.js出现跨域响应拦截问题

问题背景 #

为解决FFmpeg WASM运行时的sharedarraybuffer is not defined错误，在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后，加载Firebase Storage等跨域资源时出现以下错误：

net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200
或
net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 307

尝试为<img>元素添加crossorigin属性后，又触发CORS错误：

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.

解决方案：通过手动配置代理绕过跨域限制 #

可以通过Create React App的手动代理功能解决该问题，具体步骤如下：

• 修改src/setupProxy.js，添加针对Firebase Storage的代理规则，将前端请求转发到代理服务器，再由代理请求Firebase资源：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  
  module.exports = (app) => {
    // 保留FFmpeg所需的COOP/COEP头设置
    app.use((_, res, next) => {
      res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
      res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
      next();
    });
  
    // 添加Firebase Storage代理规则
    app.use(
      '/firebase-storage',
      createProxyMiddleware({
        target: 'https://firebasestorage.googleapis.com',
        changeOrigin: true,
        pathRewrite: {
          '^/firebase-storage': '', // 移除请求路径中的代理前缀
        },
      })
    );
  };
  

• 调整前端资源请求路径，将原来的https://firebasestorage.googleapis.com/xxxx替换为/firebase-storage/xxxx：

  // 原请求代码
  <img src="https://firebasestorage.googleapis.com/xxxx" alt="示例图片" />
  
  // 修改后的请求代码
  <img src="/firebase-storage/xxxx" alt="示例图片" />
  

• 重启React开发服务器，新的代理规则会自动生效。

该方案通过代理服务器转发请求，让浏览器认为请求是同源的，同时代理服务器向Firebase发送请求不受浏览器CORS限制，完美解决COEP头带来的跨域资源加载冲突。

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