在reactnode应用程序中发送COOP和COEP头

Question

我有一个部署的应用程序，它构建在Express (Node)上，并使用构建的React前端来呈现应用程序。

目前，我正面临着SharedArrayBuffer问题，需要传递这些标题才能使我的代码工作：

To opt in to a cross-origin isolated state, you need to send the following HTTP headers on the main document:


Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

我该怎么做呢？全新的全栈开发哈哈。

Answer 1

目前，我正在从事一个项目，在集成ffmpeg-wasm时，我也遇到了SharedArrayBuffer问题。

来自cross origin resource policy issue when playing files from s3 on deployed app的第一个片段解决了我的问题。这将出现在您的server.js中(注意序列很重要，在express.static之前设置标题)：

    app.use((req, res, next) => {
      res.header("Cross-Origin-Embedder-Policy", "require-corp");
      res.header("Cross-Origin-Opener-Policy", "same-origin");
      next();
    });
    
    app.use(express.static(...));

另一种选择是：

    const customHeaders = (res, path, stat) => {
      res.append("Cross-Origin-Embedder-Policy", "require-corp");
      res.append("Cross-Origin-Opener-Policy", "same-origin"); 
    }

    app.use(express.static(...), {
      setHeaders: customHeaders
    });

请注意，这种方法存在一些问题：

在Safari和其他浏览器中不支持

• SharedArrayBuffer，请参阅来自浏览器的https://caniuse.com/sharedarraybuffer
• All跨源负载将失败，例如外部脚本(例如分析)或来自其他域的图像加载(

)。