使用 Cross-Origin-Opener-Policy 同源时如何从 S3 加载内容

【问题标题】：How to load content from S3 when using Cross-Origin-Opener-Policy same-origin使用 Cross-Origin-Opener-Policy 同源时如何从 S3 加载内容
【发布时间】：2022-06-12 06:18:45
【问题描述】：

我需要在我们的一个脚本中使用 SharedArrayBuffer。 除非我在我们的网络服务器上设置这些标头，否则这将被阻止：

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

所以我已经在 NGINX 中毫无问题地配置了这些，现在可以使用 SharedArrayBuffer。但是，我还需要从 S3 AWS 加载图像和视频内容。

由于这些政策，此附加内容被阻止，浏览器拒绝加载这些资源并出现错误：

net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 206

我相信我可以通过正确设置 CORS 来避免这种情况，以便它专门允许我们的域作为来源。我不确定这个配置会去哪里。

我已将此指令添加到我们的 NGINX 服务器：

add_header 'Access-Control-Allow-Origin' 'https://s3.eu-west-2.amazonaws.com';

但这并没有取得任何成果，而且我认为它不是正确的服务器来进行更改。所以在那之后我去了 S3 CORS 配置并设置了这个：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://my.domain.com"
        ],
        "ExposeHeaders": []
    }
]

但是内容仍然无法加载。我有没有办法实现这一点？需要对我的 Web 服务器或 S3 配置进行哪些更改？

【问题讨论】：

• 请尝试发送Cross-Origin-Resource-Policy: cross-origin 响应标头。我认为这是这里缺少的部分。见web.dev/cross-origin-isolation-guide/… 和developer.chrome.com/blog/enabling-shared-array-buffer/…

标签： nginx amazon-s3 cors sharedarraybuffer cross-origin-embedder-policy