javascript - 如何在 Chrome 中定义 SharedArrayBuffer？

Question

我正在开发 React + WASM + FFmpeg 应用程序，关注 this tutorial
在 Chrome 上，我收到错误 Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined error.我关注了doc reference ，它在下面说，我不明白。

跨域隔离概述
您可以通过使用以下 header 提供页面来隔离页面跨域:

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

serving the pages with these headers 是什么意思意思是？
我该如何实现？
我什至找到了Chrome dev's official video ，但即使这样也没有解释任何实现细节。
Edit2:我能找到的最好的指令是here ，但即使这样对我来说也太模糊了。设置标题是什么意思？我不要求任何开始。
编辑:我的 React 版本已经是 17.0.2，所以 this should have been fixed但我也不知何故得到了这个错误......[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021.

Answer 1

让我们先说什么serving the pages with these headers方法。
例如，如果您曾经使用 Express.js 构建过 API，那么您将对此很熟悉。本质上，这意味着当用户发出 GET 请求以查看网页时，您将不得不以 HTTP header 的形式发送一些附加信息。
具体来说，第一个 header 会阻止您的页面加载任何未明确授予权限的跨域资源。第二个意味着您不能与任何跨域文档共享浏览上下文组。这两者都被用作防止跨域攻击的安全措施。即使您可能没有要求任何东西，您也必须应用它们。
现在解决您的问题，我建议安装 Chrome 扩展程序 CORS .我不确切知道它是如何工作的，但我过去曾使用过它，这将是一个临时解决方案。我浏览了您正在学习的教程，但没有看到服务器设置(例如 Express.js/Node 的 http)。如果您有任何这些，您可以将 header 作为参数传递给服务器。
要检查 CORS 设置是否按预期工作，请将以下代码添加到您的应用程序中:

if (crossOriginIsolated) {
    // Works
}