如何在Chrome中定义SharedArrayBuffer？
How to define SharedArrayBuffer in Chrome?
我正在开发 React + WASM + FFmpeg 应用程序 this tutorial
在 Chrome，我收到错误 Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined error.
我按了doc reference，下面说的，我没看懂。
Cross-origin 隔离概述
您可以通过使用以下 header 服务页面来隔离页面 cross-origin：
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，但即使这样对我来说也太模糊了。设置一个header是什么意思？我不要求任何开始。
编辑：我的 React 版本已经是 17.0.2，所以 但我也遇到了这个错误...
[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021.
让我们先说说 serving the pages with these headers 是什么意思。
例如，如果您曾经使用 Express.js 构建过 API，您就会对此很熟悉。从本质上讲，这意味着当用户发出 GET 请求以查看网页时，您将不得不以 HTTP headers.
的形式发送一些附加信息
具体来说，第一个 header 会阻止您的页面加载任何未明确授予权限的 cross-origin 资源。第二个意味着您不能与任何 cross-origin 文档共享浏览上下文组。这两者都用作防止 cross-origin 攻击的安全措施。即使您可能没有要求任何东西，您也必须应用它们。
现在解决你的问题，我建议安装 Chrome 扩展 CORS。我不知道它到底是如何工作的，但我过去使用过它，这将是一个临时解决方案。我浏览了您正在学习的教程，但没有看到服务器设置（例如 Express.js/Node 的 http）。如果您有其中任何一个，您可以将 header 作为参数传递给服务器。
要检查 CORS 设置是否按预期工作，请将以下代码添加到您的应用中：
if (crossOriginIsolated) {
// Works
}
SharedArrayBuffer 用于在您的主浏览上下文和另一个代理（另一个网页或工作人员）之间共享数据缓冲区。
但是，为了尽量减少可能的安全漏洞，规范声明此 API 只能在 secure context 中运行。
除了此安全先决条件外，任何 top-level 文档也必须处于跨源隔离中。这意味着，提供内容的一方应该告诉浏览器它应该阻止 cross-origin 资源的加载。 （来自域 A 的文档试图从域 B 获取数据）
这是由服务器通过在为网站提供服务时指定以下两个响应端来完成的：
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
如何在调试环境中指定它们？
您需要设置一个标准的文件服务器，例如Apache。然后你将不得不调整它的配置来为上面的 headers 提供文件。
快速设置：https://www.wampserver.com/en/
提供 header 信息的答案：https://whosebug.com/a/35566100/4185234
我最近 运行 研究了这个问题并找到了你的问题和上面的答案
What does serving the pages with these headers mean?
这意味着配置为您的页面提供服务的服务器以包含那些 headers。如何配置服务器取决于您使用的软件，Apache、Nginx、Caddy，或者您使用的是其他 1000 种软件中的一种还是您自己编写的。
我写了 2 个（或者更准确地说，我用一个库写了 2 个）并且我添加了包含那些 headers 的选项。两者都是开源的，因此如果您想了解它们的工作原理，可以查看内部。
如果您更喜欢 UI 那么 this one. If you prefer the command line then install node.js and then you can use this one
我正在开发 React + WASM + FFmpeg 应用程序 this tutorial
在 Chrome，我收到错误 Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined error.
我按了doc reference，下面说的，我没看懂。
Cross-origin 隔离概述
您可以通过使用以下 header 服务页面来隔离页面 cross-origin：
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，但即使这样对我来说也太模糊了。设置一个header是什么意思？我不要求任何开始。
编辑：我的 React 版本已经是 17.0.2，所以
[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021.
让我们先说说 serving the pages with these headers 是什么意思。
例如，如果您曾经使用 Express.js 构建过 API，您就会对此很熟悉。从本质上讲，这意味着当用户发出 GET 请求以查看网页时，您将不得不以 HTTP headers.
的形式发送一些附加信息具体来说，第一个 header 会阻止您的页面加载任何未明确授予权限的 cross-origin 资源。第二个意味着您不能与任何 cross-origin 文档共享浏览上下文组。这两者都用作防止 cross-origin 攻击的安全措施。即使您可能没有要求任何东西，您也必须应用它们。
现在解决你的问题，我建议安装 Chrome 扩展 CORS。我不知道它到底是如何工作的，但我过去使用过它，这将是一个临时解决方案。我浏览了您正在学习的教程，但没有看到服务器设置（例如 Express.js/Node 的 http）。如果您有其中任何一个，您可以将 header 作为参数传递给服务器。
要检查 CORS 设置是否按预期工作，请将以下代码添加到您的应用中：
if (crossOriginIsolated) {
// Works
}
SharedArrayBuffer 用于在您的主浏览上下文和另一个代理（另一个网页或工作人员）之间共享数据缓冲区。
但是，为了尽量减少可能的安全漏洞，规范声明此 API 只能在 secure context 中运行。
除了此安全先决条件外，任何 top-level 文档也必须处于跨源隔离中。这意味着，提供内容的一方应该告诉浏览器它应该阻止 cross-origin 资源的加载。 （来自域 A 的文档试图从域 B 获取数据）
这是由服务器通过在为网站提供服务时指定以下两个响应端来完成的：
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
如何在调试环境中指定它们？
您需要设置一个标准的文件服务器，例如Apache。然后你将不得不调整它的配置来为上面的 headers 提供文件。
快速设置：https://www.wampserver.com/en/
提供 header 信息的答案：https://whosebug.com/a/35566100/4185234
我最近 运行 研究了这个问题并找到了你的问题和上面的答案
What does serving the pages with these headers mean?
这意味着配置为您的页面提供服务的服务器以包含那些 headers。如何配置服务器取决于您使用的软件，Apache、Nginx、Caddy，或者您使用的是其他 1000 种软件中的一种还是您自己编写的。
我写了 2 个（或者更准确地说，我用一个库写了 2 个）并且我添加了包含那些 headers 的选项。两者都是开源的，因此如果您想了解它们的工作原理，可以查看内部。
如果您更喜欢 UI 那么 this one. If you prefer the command line then install node.js and then you can use this one