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?

Answer 1

After several conversations with Amazon support, the way to achieve the above is to front S3 with a CloudFront distribution. CloudFront does not have the same restrictions as S3 with Only one auth mechanism allowed

Here's what I did:

• Create a CloudFront distribution with an S3 origin.
  • Optional selection - restrict bucket access.
  • You'll need a CloudFront Access Identity (use an existing or create a new one).
  • Recommended selection - update bucket policy
• In S3
  • Ensure the bucket policy was updated (automatically populated when "update bucket policy" is selected above)
  • update the CORS configuration with the methods/headers you need to support

The other thing you'll need is a CloudFront key pair as described here and then use that information when generating the presigned link.

MORE INFO

• CloudFront with S3 Origin
• CloudFront Signed URLs

Amazon definitely makes this much more complicated than it needs to be (i.e. why is there the Only one auth mechanism allowed restriction on S3 at all?) but at least there's a workaround for those that need it.