403 AWS SignatureDoesNotMatch error

[Tyler Gaugler]

Hey, i'm really struggling to get this to work.

Ultimately, I am getting a 403 status code with "The request signature we calculated does not match the signature you provided. Check your key and signing method." as the error message when uploading an image.

Here is my react code:

       <ReactS3Uploader
             className={"idk"}
             getSignedUrl={this.getSignedUrl}
             accept="image/*"
             uploadRequestHeaders={{
               'x-amz-acl': 'public-read'
             }}
             contentDisposition="auto"
            />

 public getSignedUrl(file: any, callback: any) {

    const params = {
      objectName: file.name,
      contentType: file.type
    };
    const api = getApi();
    api
      .get(`api/s3/sign`, {
        params
      })
      .then(res => {
        callback(res.data);
      })
      .catch(() => {
        alert("SOMETHING WENT WRONG");
      });

  }

Here is my server side code:

  def get_aws_presigned_url
    filename = params["objectName"]
    content = params["contentType"]

    storage = Fog::Storage.new(
      provider: 'AWS',
      aws_access_key_id: "my_access_key_id",
      aws_secret_access_key: "my_access_key"
    )


    options = {path_style: true}
    headers = {"Content-Type" => content, "x-amz-acl" => "public-read"}
    puts "contentType: #{content}"

    url = storage.put_object_url("bucket-name", "#{filename}", 15.minutes.from_now.to_time.to_i, headers, options)
    render json: {signedUrl: url}

  end

I created an Iam user with the policy AmazonS3FullAccess.

Something I also updated was the cors policy of my s3 bucket with:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Can someone please tell me what i'm doing wrong? Thanks

[AdnanTheExcellent]

I was trying to implement this as well with a custom getSignedUrl method and I am getting the same error. Cannot figure it out. When i dont use a custom getSignedUrl method it works, but i need the custom one to send an additional object hash to rails, which is not possible with using only signingUrlQueryParameters

[mastercoder8]

most likely its related to aws-sdk s3 option signature_version...
https://docs.aws.amazon.com/AmazonS3/latest/dev/UsingAWSSDK.html#specify-signature-version

Try using fog version: > 0.4.1 https://github.com/fog/fog-aws/blob/master/CHANGELOG.md#v040-2015-05-27

[Chandan Kumar]

Check if its duplicate of #106 (comment)

You'll have to do something like uploadRequestHeaders={{}}

<ReactS3Uploader uploadRequestHeaders={{}}