Question

它让我发疯，任何帮助都会非常感激！

要在S3中设置我的桶，我跟在http://www.cheynewallace.com/uploading-to-s3-with-angularjs/

关于这篇文章，我做了以下＆＃34;改进＆＃34;通过使用通配符扩展策略并提供更多权限

{
"Version": "2012-10-17",
"Statement": [
    {
        "Effect": "Allow",
        "Action": [
            "s3:DeleteObject",
            "s3:DeleteObjectVersion",
            "s3:GetObject",
            "s3:GetObjectAcl",
            "s3:GetObjectTorrent",
            "s3:GetObjectVersion",
            "s3:GetObjectVersionAcl",
            "s3:GetObjectVersionTorrent",
            "s3:PutObject",
            "s3:PutObjectAcl",
            "s3:PutObjectVersionAcl"
        ],
        "Resource": [
            "arn:aws:s3:::photos-eu/*"
        ]
    }
]
}

并添加＆lt; ExposeHeader＆GT; ETag的＆LT; / ExposeHeader＆gt;到桶的Cors设置

然后我使用aws-sdk的角度服务看起来像

/// <reference path="../../../typings/tsd.d.ts" />

module Services {

  export interface IS3UploadService {
    upload(imgName:string, imgData:string):ng.IPromise<{}>;
  }

  export class S3UploadService implements IS3UploadService {

static $inject = ['$q'];

private bucket:AWS.S3;

constructor(private $q:ng.IQService) {
  var credentials = new AWS.Credentials("myAccessKeyId", "mySecretAccessKey");
  AWS.config.update(credentials);
  AWS.config.region = "eu-west-1";

  this.bucket = new AWS.S3({params: {Bucket: 'peterparker-photos-eu', maxRetries: 10, region: "eu-west-1"}});

}

upload(imgName:string, imgData:string):ng.IPromise<{}> {
  var deferred = this.$q.defer();

  var params:AWS.s3.PutObjectRequest = {
    Bucket: "peterparker-photos-eu",
    Key: imgName,
    Body: imgData,
    ContentType: "image/jpeg",
    ContentEncoding: "Base64"
  };

  this.bucket.putObject(params, (err:any, data:any) => {
    if (err) {
      console.error("->" + JSON.stringify(err));
      deferred.reject(err);
    } else {
      console.info(data);
      deferred.resolve(data);
    }
  });

  return deferred.promise;
}

  }
}

angular.module('App')
  .service('S3UploadService', Services.S3UploadService);

为了我的测试目的，我将imgData推入一个编码为Base64的img，类似＆＃34; / 9j / 4AAQSkZJRgABAgAAZABkA ....＆＃34; （当然是用http://base64-image.de转换的有效图像）

结果，每次我尝试，我都有跟随错误

{＆＃34;线＆＃34;：25，＆＃34;柱＆＃34;：24996＆＃34; sourceURL＆＃34;：＆＃34; http://localhost:8100/lib/aws-sdk/dist/aws-sdk.min.js＆＃34;，＆＃34; message＆＃34;：＆＃34;我们计算的请求签名与您提供的签名不匹配。检查您的密钥和签名方法。＆＃34;，＆＃34;代码＆＃34;：＆＃34; SignatureDoesNotMatch＆＃34;，＆＃34; region＆＃34;：null，＆＃34; time＆＃34;：＆＃34; 2016-06-08T15：12：09.945Z＆＃34;＆＃34;的requestId＆＃34;：空，＆＃34;的StatusCode＆＃34;：403，＆＃34;重试＆＃34;：假＆＃34; retryDelay＆＃34;：60.59883770067245}

非常有趣......

更新标题：

General
Request URL:https://peterparker-photos-eu.s3-eu-west-1.amazonaws.com/1465408512724.jpg
Request Method:PUT
Status Code:403 Forbidden
Remote Address:54.231.131.16:443

Response headers
Access-Control-Allow-Methods:HEAD, GET, PUT, POST, DELETE
Access-Control-Allow-Origin:*
Access-Control-Expose-Headers:ETag, x-amz-meta-custom-header
Connection:close
Content-Type:application/xml
Date:Wed, 08 Jun 2016 17:55:20 GMT
Server:AmazonS3
Transfer-Encoding:chunked
Vary:Origin, Access-Control-Request-Headers, Access-Control-Request-        Method
x-amz-id-...
x-amz-request-id:...

Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4,de;q=0.2
Authorization:AWS ...
Connection:keep-alive
Content-Encoding:Base64
Content-Length:38780
Content-MD5:...
Content-Type:image/jpeg; charset=UTF-8
Host:peterparker-photos-eu.s3-eu-west-1.amazonaws.com
Origin:http://localhost:8100
Referer:http://localhost:8100/?ionicplatform=ios
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5)             AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36
X-Amz-Date:Wed, 08 Jun 2016 17:55:20 GMT
X-Amz-User-Agent:aws-sdk-js/2.3.18

Request payload
Img base64 code

更新

即使尝试上传非Base64内容，它也会以相同的错误

完成

var paramsHtml:AWS.s3.PutObjectRequest = {
    Bucket: "peterparker-photos-eu",
    Key: "HelloWorld.html",
    Body: "The Body",
    ContentType: "text/html"
  };

更新＃2

我移动到我的节点js服务器生成的带有签名URL的解决方案，如下面的解决方案所述，仍然得到与结果相同的错误...但我至少尝试了;）

upload file from angularjs directly to amazon s3 using signed url

Answer 1

Freak我终于找到了解决方案或者至少找到了解决方案。

将我的客户端基于aws-sdk的解决方案迁移到服务器生成signedUrl的解决方案后，我仍然面临同样的错误。简而言之，它通过在标题的内容类型中设置双方来解决问题。

我的代码，如果某人有一天面临同样的问题：

Server Node.js

var AWS = require('aws-sdk');

AWS.config.update({accessKeyId: "myKey", secretAccessKey: "mySecret"});
AWS.config.region = 'eu-west-1';

app.post('/api/images', securityPolicy.authorise, function (req, res) {

var s3 = new AWS.S3();

var imgName = req.body.imgName;
var contentType = req.body.contentType;

// Expires in seconds
var params = {Bucket: 'photos-eu', Key: imgName, Expires: 600, ContentType: contentType};
s3.getSignedUrl('putObject', params, function (err, url) {
    if (err) {
        res.status(500).json({
            error: "Presigned S3 url for putObject can't be created. " + JSON.stringify(err)
        });
    } else {
        res.json({url: url});
    }
});
});

客户角度：

首先或当然有部分调用节点服务器，显而易见的POST到我的服务器

然后第二部分处理signedURL

private uploadToS3(preSignedUrl:string, imgData:string):ng.IPromise<{}> {
  var deferred = this.$q.defer();

  // Post image to S3
  this.$http({
    method: 'PUT',
    url: preSignedUrl,
    headers: {'Content-Type': 'image/jpeg'},
    data: imgData
  })
    .then((response:any) => {
      console.log("Image uploaded to S3" + JSON.stringify(response));

      deferred.resolve();

    }, (response:any) => {
      console.log("Error Presigned URL" + JSON.stringify(response));
      deferred.reject(response);
    });

  return deferred.promise;
}

S3 putObject使用aws-sdk失败

1 个答案: