设置s3桶以处理跨源资源策略

Question

我面临着播放来自s3桶的音频文件的问题。我想知道，我是否设置了跨源资源策略糟糕。

这是我的server.js文件：

app.use(cors());


app.use(function(req, res, next) {
  res.header("Cross-Origin-Resource-Policy", "cross-origin");
  res.header("Cross-Origin-Embedder-Policy", "require-corp");
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  next();
  
});

铬抛给我的错误是：

GET https://monkeys.s3.amazonaws.com/sounds/1/6.wav?AWSAccessKeyId={test}&Expires=1627949062&Signature=HkT2CyazqovtjPVpDNKCu9Nsyk8%3D&response-content-disposition=attachment net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep
manage:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

我的水桶在cors部分是这样设置的：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://telecurve.herokuapp.com/manage"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://telecurve.herokuapp.com/"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

我遗漏了什么吗？我已经干了好几天了，似乎找不出原因。如果您需要更多的上下文，我有更多的文章详细介绍代码端！迫切需要帮助。

Answer 1

如果我没有弄错，您在app.js中返回的标题会阻止浏览器加载托管在其他域上的URL。

我--不小心--也做了同样的事情，在我对应的“app.use(.)”脚本中，将以下标题添加到网站的响应中：

enter code here
Access-Control-Allow-Origin = "*"
Cross-Origin-Opener-Policy = "same-origin"

更多关于如何保留这些标头并能够访问“另一个域”上的资源的信息，以及对这些标头的解释：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy

最后，我删除了头和-of课程--它起了作用。

Answer 2

太让人费解了，但我明白了。

我的node.js应用

app.use(cors());

app.use(function(_req, res, next) {
  res.setHeader("Content-Security-Policy", "script-src 'self' https://xxxxx.s3.amazonaws.com");
  res.header("Cross-Origin-Embedder-Policy", "unsafe-none");
  return next();
});

我的S3水桶

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]