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

【问题标题】：Uploading to S3 from browser using signed upload URL fails使用签名上传 URL 从浏览器上传到 S3 失败
【发布时间】：2017-03-20 12:17:27
【问题描述】：

我正在尝试直接从浏览器将文件上传到 S3。为此，我正在我的服务器上生成一个签名的上传 URL。

当我尝试使用从浏览器将文件上传到生成的 url 时

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

我收到以下错误

<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>

我可以通过以下命令使用 curl 上传到签名 URL

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

浏览器将我的请求作为导致问题的多部分形式数据发送。我该如何解决这个问题？

我正在使用以下代码生成签名 URL

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

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

编辑：为了清楚起见，我已允许所有来源在存储桶 CORS 配置中发送 PUT 请求。

【问题讨论】：

标签： javascript file-upload browser amazon-s3

【解决方案1】：

好的，问题是浏览器在请求标头中发送了 Content-Type，但没有为该内容类型生成签名的 url。而不是这个

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

我做了这个

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

它成功了！

【讨论】：