设置 s3 存储桶来处理跨源资源策略答案

【问题标题】：setting up s3 bucket to handle cross origin resource policy设置 s3 存储桶来处理跨源资源策略
【发布时间】：2022-04-25 13:32:38
【问题描述】：

我在播放 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();
  
});

chrome 给我的错误是：

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": []
    }
]

我缺少什么吗？我已经在这几天了，似乎无法找出原因。如果您需要更多上下文，我有更多详细说明代码方面的帖子！急需帮助。

【问题讨论】：

标签： node.js amazon-web-services express amazon-s3 aws-lambda

【解决方案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

最后，我删除了标题，并且 - 当然 - 它有效。

【讨论】：

【解决方案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 存储桶的 CORS

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

【讨论】：