ReactJS-在重定向之前删除 HTTP header

Question

在我的 React 应用程序中，我正在对端点进行 GET REST Web 服务调用，其目的是为 protected S3 Assets 生成预签名的 AWS URL。我们将 Authorization header 和 token 传递给服务。

此初始调用按预期工作，服务通过重定向(通过 307 响应代码)进行响应，并在响应的 Location header 中包含预签名 URL。

我面临的问题是，当遵循重定向时，亚马逊会拒绝调用，并显示 400 响应代码和以下消息。

Only one auth mechanism allowed; only the X-Amz-Algorithm query parameter, Signature query string parameter or the Authorization header should be specified.

有没有办法在重定向之前删除Authorization header ？

这似乎应该是一种相当常见的情况(当 React 应用程序需要访问 protected S3 Assets 时) - 有没有更好的方法来处理这种用例？

Answer 1

与 Amazon 支持人员进行多次对话后，实现上述目标的方法是在 S3 上使用 CloudFront 发行版。 CloudFront 没有与 S3 相同的限制，仅允许一种身份验证机制

这就是我所做的:

• 创建具有 S3 源的 CloudFront 分配。
  • 可选选择 - 限制存储桶访问。
  • 您需要一个 CloudFront 访问身份(使用现有的或创建新的)。
  • 推荐选择 - 更新存储桶政策
• 在 S3 中
  • 确保存储桶政策已更新(在上面选择“更新存储桶政策”时自动填充)
  • 使用您需要支持的方法/ header 更新 CORS 配置

您需要的另一件事是 CloudFront key 对，如 here 中所述。然后在 generating the presigned link 时使用该信息.

更多信息

• CloudFront with S3 Origin
• CloudFront Signed URLs

亚马逊肯定让这件事变得比需要的复杂得多(即为什么对 S3 存在仅允许一种身份验证机制限制？)但至少对于那些需要的人来说有一个解决方法它。