angularjs - 无法使用带有预签名 URL 的 Angularjs 将文件上传到 Amazon S3

Question

我在将文件上传到 Amazon S3 时遇到问题。我开发了一个 Grails RESTful 服务，它使用 AWS Java SDK生成预签名的 URL。当客户端上传文件时，它首先检索一个预签名的 URL，然后使用它直接将文件上传到我的 S3 存储桶。所以我有一个 Grails 服务，它创建一个像这样的预签名 URL...

def generateFileUploadUrl(AmazonS3Client client, String bucketName, String key, int expiryMins) {
    GeneratePresignedUrlRequest req = new GeneratePresignedUrlRequest(bucketName, key);
    req.setMethod(HttpMethod.POST);
    req.setExpiration(getExpiration(expiryMins)); 
    return client.generatePresignedUrl(req);
}

然后客户端检索具有以下格式的 URL...

https://{bucketname}.amazonaws.com/{key}?AWSAccessKeyId={accesskey}&Expires={expiry}&Signature={signature}

然后客户端使用 Danial Farid 的 Angular File Upload module 创建一个 POST 请求。像这样...

Upload.upload({
    url: destUrl, // url shown above
    file: file
}).progress(function (evt) {
  var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
  console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
}).success(function (data, status, headers, config) {
  console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
}).error(function (data, status, headers, config) {
  console.log('error status: ' + status);
});

起初我收到有关 CORS 设置的错误，但在我的存储桶权限中编辑 CORS 源配置后，我开始收到 403 禁止响应。 403 响应中的消息是“我们计算的请求签名与您提供的签名不匹配。检查您的 key 和签名方法。'。 AWS 访问 key 和提供的签名匹配，所以我不确定确切的错误是什么。

我的请求是否缺少一些额外信息？看了一些其他的帖子，比如 this ，它会手动创建一个策略文档以与 URL 一起发送，但它不使用 AWS Java 开发工具包。

碰巧的是，我的方法适用于 GET 请求，而且我可以检索文档。就是不能上传。

Answer 1

我知道这是一个老问题，但它似乎仍然相关，而且让它工作似乎仍然很棘手。 S3 签名 URL 上传对请求和响应中使用的字段非常讲究，正如您所看到的，错误消息并没有太大帮助 - 我认为这是出于安全原因的意图，但它确实使调试变得困难。

AWS 签名流程也发生了变化——此时(2016 年 3 月)的版本是 AWS 签名版本 4 (http://docs.aws.amazon.com/general/latest/gr/signature-version-4.html)。在查看示例和 Stackoverflow 等时，您需要小心，这些信息与您使用的相同签名版本相关，因为它们不能很好地混合。

我开始使用 AWS SDK 上传 angular/node 文件，但最终发现在没有 SDK 的情况下在服务器 (node.js) 端生成策略更容易。这里有一个很好的例子(虽然是节点，不是基于 Grails):https://github.com/danialfarid/ng-file-upload/wiki/Direct-S3-upload-and-Node-signing-example (但请注意此处 S3 存储桶名称的问题: AngularJs Image upload to S3 )。

需要注意的一个关键事项是您在策略生成中正确包含文件内容类型，并且此内容类型与您实际上传的文件的内容类型正确匹配。

作为引用，这是 Angular 侧的代码，它对我有用:

$scope.upload = function (file) {
    console.log("WebUploadCtrl upload");
    console.log("WebUploadCtrl sending S3sign request");
    var query = {
        filename: file.name,
        type: file.type
    };
    $http.post('/api/s3sign', query).success(function(response) {
        console.log("WebUploadCtrl s3sign response received");
        var s3ResponseParams = response;
        console.log("WebUploadCtrl upload  AWSAccessKeyId: " + response.AWSAccessKeyId);
        console.log("WebUploadCtrl upload  signature: " + response.Signature);
        $scope.upload = Upload.upload({
                url: s3ResponseParams.url, //s3Url
                transformRequest: function(data, headersGetter) {
                    var headers = headersGetter();
                    delete headers.Authorization;
                    return data;
                },
                fields: s3ResponseParams.fields, //credentials
                method: 'POST',
                file: file
            }).progress(function(evt) {
                $scope.progressPerCent = parseInt(100.0 * evt.loaded / evt.total);
                console.log('progress: ' + $scope.progressPerCent);
            }).success(function(data, status, headers, config) {
                // file is uploaded successfully
                console.log('file ' + config.file.name + 'is uploaded successfully. Response: ' + data);                

            }).error(function() {
                // Some error has occured
                console.log('Error uploading to S3');
          });
    });
};