angularjs - 使用预先签名的 url PUT 到 S3 会出现 403 错误

Question

我正在使用 Node 获取 S3 的 presignedRUL，以便将图像放入 S3 存储桶。

var aws = require('aws-sdk');
// Request presigned URL from S3
exports.S3presignedURL = function (req, res) {
  var s3 = new aws.S3();
  var params = {
    Bucket: process.env.S3_BUCKET, 
    Key: '123456', //TODO: creat unique S3 key
    //ACL:'public-read',
    ContentType: req.body['Content-Type'], //'image/jpg'
  };
  s3.getSignedUrl('putObject', params, function(err, url) {
      if(err) console.log(err);
      res.json({url: url});
  });
};

这成功地检索了表单的预签名网址...

https://[my-bucket-name].s3.amazonaws.com/1233456?AWSAccessKeyId=[My-ID]&Expires=1517063526&Signature=95eA00KkJnJAgxdzNNafGJ6GRLc%3D
(我必须包含一个 expires header 吗？)

回到客户端(Web 应用程序)，我使用 angular 生成 HTTP 请求。我同时使用了 $http 和 ngFileUpload，但都没有成功。这是我的 ngFileUpload 代码。

Upload.upload({
    url: responce.data.url, //S3 upload url including bucket name
    method: 'PUT',
    'Content-Type': file.type, //I have tried putting the ContentTyep header all over
    headers: { 
        //'x-amz-acl':'public-read',
        'Content-Type': file.type, 
    }, 
    data: { 
        file: file,
        headers:{'Content-Type': file.type,}
    },                         
})

但是，似乎无论我如何格式化标题，我总是会收到 403 错误。在错误的 XML 中，它说，

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

我不认为 CORS 是一个问题。最初我遇到了一些 CORS 错误，但它们看起来不同，我让它们通过对 S3 存储桶 CORS 设置的一些更改而消失。对于 presignedURL 的请求和对 S3 的 PUT 请求的请求，我已经尝试了大量的 header 的反复试验设置，但我似乎无法找到正确的组合。

我确实注意到当我 console.log 403 响应错误时，该字段

config.headers:{Content-Type: undefined, __setXHR_: ƒ, Accept: "application/json, text/plain, */*"}

这是说没有设置 Content-Type 头吗？当我在我认为可能的任何地方设置该标题时，怎么会这样？无论如何，我的头撞到了这堵墙有点...

编辑:根据要求，我当前的 CORS。 (我把所有东西都扔掉了，以消除我之前的 CORS 警告。只有在我上传工作后，我才会将其精简为必需品。)

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedOrigin>http://localhost:9500</AllowedOrigin>
    <AllowedOrigin>https://localhost:9500</AllowedOrigin>
    <AllowedOrigin>http://www.example.com</AllowedOrigin>
    <AllowedOrigin>https://www.example.com</AllowedOrigin>
    <AllowedOrigin>http://lvh.me:9500</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
    <AllowedHeader>Content-Type</AllowedHeader>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Answer 1

面临同样的问题。发现我用来创建预签名 URL 的内容类型与我发送到 S3 的对象的内容类型不匹配。我建议您在创建预签名 URL 时添加 Expiration header (我也这样做了)，并在控制台中准确检查在您执行 S3 时发送的内容类型。此外，数据只需要是文件，而不是您在那里创建的结构。