reactjs - ReactJS- remove HTTP header before redirect

Question

In my React app, I'm making a GET REST web service call to an endpoint whose purpose is to generate a presigned AWS URL to a protected S3 asset. We pass an Authorization header and a token to the service.

This initial call works as expected and the service responds with a redirect (via a 307 response code) and includes the presigned URL in the response's Location header.

The issue I'm facing is that when the redirect is followed, Amazon rejects the call with a 400 response code and the following message.

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

Is there a way to remove the Authorization header before the redirect is followed?

This seems like it should be a fairly common situation (when a React application requires access to a protected S3 asset) - is there a better way to handle this use case?

标签： reactjsrestamazon-web-services

Answer 1

在与 Amazon 支持人员进行了几次对话后，实现上述目标的方法是在 S3 前面使用 CloudFront 分配。CloudFront 没有与 S3 相同的限制Only one auth mechanism allowed

这是我所做的：

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

您需要的另一件事是此处描述的 CloudFront 密钥对，然后在生成预签名链接时使用该信息。

更多信息

• CloudFront 与 S3 源
• CloudFront 签名 URL

亚马逊肯定使这比它需要的复杂得多（即为什么Only one auth mechanism allowed对 S3 有限制？）但至少对于那些需要它的人来说有一种解决方法。