通过 ng-file-upload 上传到 Amazon S3;错误 400

Uploading to Amazon S3 via ng-file-upload; Error 400

我正在使用 ng-file-upload to upload a photo to S3. I have tested my S3 bucket and my policy/signature generator with the ng-file-upload demo tool 并已成功将照片上传到我的存储桶。


编辑: 一个关键区别似乎是添加了 header:

Authorization:Token 3j4fl8jk0lqfkj4izj2w3ljfopljlwep1010notreal

我的代码中有,但演示页面中没有。也许这是我的 angular 应用程序。


通过 bower 安装,获取相关组件,尝试上传文件,并得到如下所示的错误:

 400: <?xml version="1.0" encoding="UTF-8"?> 
 <Error>
 <Code>InvalidArgument</Code> 
 <Message>Unsupported Authorization Type</Message> 
 <ArgumentName>Authorization</ArgumentName>
 <ArgumentValue>Token 3j4fl8jk0lqfkj4izj2w3ljfopljlwep1010notreal</ArgumentValue>
 <RequestId>F1F5FK-not-real-81FED9CA</RequestId>
 <HostId>CQEW98p3D2e+pVz-not-real-codeu28m7asqpGjagL3409gj3f4kijKJpofk</HostId>
 </Error>

四处搜索,我注意到很多 400 错误,但 ArgumentValueToken [some-code-here] 的情况并不多。

查看 AWS documentationInvalidArgument 对于 AWS 的新手来说有点不透明。

这是我正在编码的政策 (Python):

#exptime = '2100-07-31T06:23:35Z' #for debugging
policy_document = {"expiration": exptime,
    "conditions": [ 
      {"bucket": settings.AWS_STORAGE_BUCKET_NAME}, 
      ["starts-with", '$key', ""],
      {"acl": "private"},
      ["starts-with", "$Content-Type", ""],
      ["starts-with", "$filename", ""],
      ["content-length-range", 0, 5000000] 
    ]
  }

重申一下,上述演示的此策略有效,因此我预计我的 front-end 实施会出现问题:

$scope.upload = function(file) {
    file.upload = Upload.upload({
                url: 'https://mybucket.s3-us-west-2.amazonaws.com',
                method: 'POST',
                fields: {
                    key: file.name,
                    AWSAccessKeyId: myAccessKeyId,
                    acl: 'private',
                    policy: myPolicyEncoded,
                    signature: mySignatureEncoded,
                    "Content-Type": file.type === null || 
                        file.type === '' ? 'application/octet-stream' : file.type,
                    filename: file.name
                },
                file: file
            });
}

我花了一些时间才找到它,但正如我的编辑指出的那样,查看请求 header Angular 应用的 login/auth 进程中使用的令牌被发送为默认值,亚马逊的服务不喜欢这样。在这个特定案例的 http 请求中删除 header 解决了这个问题。

我的 front-end 上的上传服务如下所示:

$scope.upload = function(file) {
    file.upload = Upload.upload({
                url: 'https://mybucket.s3-us-west-2.amazonaws.com',
                method: 'POST',
                fields: {
                    key: file.name,
                    AWSAccessKeyId: myAccessKeyId,
                    acl: 'private',
                    policy: myPolicyEncoded,
                    signature: mySignatureEncoded,
                    "Content-Type": file.type === null || 
                        file.type === '' ? 'application/octet-stream' : file.type,
                    filename: file.name
                },
                headers: {
                    'Authorization': undefined
                },
                file: file
            });
}

这是一个旧线程,但我刚遇到这个错误。

您可以将 header 放入 CORS 策略中,而不是删除自定义 header,例如:

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