React中SharedArrayBuffer的头在哪里设置

Question

我正在Windows10上的localhost上运行一个使用create-react应用程序创建的网站。当我尝试在我的网站中使用ffmpeg时，我会收到错误

"SharedArrayBuffer未定义"；

在Firefox中。为了解决这个问题，我到处看到我必须添加COOP和COEP头"；在我的首要文件中"；。

问题是我不明白；顶部文档"；是，在哪里可以找到。

我试着添加：

<meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">
<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin"> 

在我的index.html中，我在某个地方看到了它，但它不起作用。

你能告诉我我必须在其中添加页眉的文档是什么吗？在哪里可以找到它？

Answer 1

在HTML Living Standard中，只有某些值可以在meta标记的http-equiv属性中设置。它们是content-language、content-type、default-style、refresh、set-cookie、x-ua-compatible和content-security-policy。由于Cross-Origin-Embedder-Policy和Cross-Origin-Opener-Policy都没有出现在这里，因此不能使用meta标签的http-equiv属性来设置这些HTTP头(根据HTML规范(。您需要将这些作为HTTP头添加到HTML文档中，而不是作为meta标记。

Answer 2

我也想在我的应用程序中添加相同的头，我有一个想法想验证一下，我想我必须在应用程序服务器的web服务器上添加这些头，或者如果你使用来自CDN的静态SPA，当用户请求index.html和JS捆绑包时，这些头需要作为响应头发送

Answer 3

使用元元素对CSP来说很好，但如果您想尝试使用"仅内容安全策略报告"，则不能使用元标记。

具体来说，我创建了一个src/setupProxy.js文件，其中包含以下内容，并且一切似乎都很好(React App(：

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

作为一种变通方法，我使用了手动配置代理的功能(https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-手动代理(。

你看到了吗https://github.com/facebook/create-react-app/issues/10210?