使用签名的上传URL从浏览器上传到S3失败

Question

I'm trying to upload a file to S3 directly from browser. For this, I'm generating a signed upload URL on my server.

When I try to upload a file to the generated url from the browser using

var xhr = new XMLHttpRequest();
xhr.open('PUT', signedUrl);     
xhr.send(file);

I get the following error

<Error>
  <Code>
    SignatureDoesNotMatch
  </Code>
  <Message>
    The request signature we calculated does not match the signature you provided. Check your key and signing method.
  </Message>
  ...
</Error>

I can upload to the signed URL using curl with the following command

curl -T <file> -X PUT '<signed-url>'

The browser is sending my request as multipart-form data which is causing the problem. How do I fix the issue?

I'm generating the signed URL using the following code

var params = {
    Bucket: bucket, 
    Key: s3Key,
    ACL: "authenticated-read",
    Expires: 600
};

S3.getSignedUrl('putObject', params, (err, data) => {
    const returnData = {
        url: data
    };
    reply(returnData);
});

Edit: Just to be clear, I have allowed all origins to send PUT requests in bucket CORS configuration.

Answer 1

Okay, the problem was that Content-Type was being sent by the browser in the request header but the signed url wasn't being generated for the content type. Instead of this

var params = {
    Bucket: bucket, 
    Key: s3Key,
    ACL: "authenticated-read",
    Expires: 600
};
S3.getSignedUrl('putObject', params, ...);

I did this

var params = {
    Bucket: bucket, 
    Key: s3Key,
    ACL: "authenticated-read",
    Expires: 600,
    ContentType: require('mime').lookup(filename)
};
S3.getSignedUrl('putObject', params, ...);

and it worked!