直接上传到AWS S3:仅针对IE的SignatureDoesNotMatch

时间:2015-03-23 21:16:57

标签: javascript ajax node.js internet-explorer amazon-s3

我使用Amazon Web Service S3上传和存储我的文件。我使用AWS Sdk为Node.js服务器端生成一个预先签名的URL,以便通过此预先签名的URL直接从浏览器上传文件。

工作原理

服务器端我有一个返回预签名网址的方法。

AWS.config.loadFromPath(__dirname + '/../properties/aws-config.json');
AWS.config.region = 'eu-west-1';
//Credentials are loaded

var s3 = new AWS.S3();
var docId = req.query.doc;
var params = {
    Bucket: res.locals.user.bucketId, 
    Key: docId+"."+req.query.fileExtension, 
    ACL : "bucket-owner-read", 
    ContentType : req.query.fileType
};
s3.getSignedUrl('putObject', params, function (err, url) {
    if(url){
        res.writeHead(200);
        var result = {
            AWSUrl : url
        };
        //Generates pre signed URL with signature param
        res.end(JSON.stringify(result));
    }
}

我直接将文件上传到S3客户端

var loadToAWSS3 = function(url, file, inputFileId){
    var data = new FormData();
    data.append('file', file);

    $.ajax({
        url: url,//url getted from server-side method
        type: 'PUT',
        data : data,
        headers: { 
            'Content-Type': file.type
        },
        processData: false,
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){
                myXhr.upload.addEventListener('progress',function(e){
                    if(e.lengthComputable){
                        var max = e.total;
                        var current = e.loaded;

                        var percentage = (current * 100)/max;
                        //stuff to handle progress...
                    }  
                }, 
                false);
            }
            return myXhr;
    },
    statusCode: {
        200: function () {          
            //some stuff 
        }
    });
}

Chrome& Firefox行为

按预期工作,预先签名的URL被获取,然后文件被上传,我可以在我的AWS S3控制台中看到它。

可爱的IE 11

SignatureDoesNotMatch错误! IE向AWS不期望的Content-Type请求标头添加一些额外的东西,这会导致签名比较中的错误。在服务器端,Sdk基于以下方式生成签名:

ContentType : req.query.fileType //(something like application/pdf)

当我用IE调试器检查请求时,我看到了

 Content-Type   application/pdf, multipart/form-data; boundary=---------------------------7df2f3283091c
Chrome中的

我的请求标题很好

Content-Type: application/pdf

如何删除此IE额外内容类型?如果不可能,我怎样才能在发送请求之前生成这些额外的东西,以便在签名中获得带有额外内容的预签名网址?

2 个答案:

答案 0 :(得分:9)

好的,我终于明白了。

使用FormData()模拟您通过表单发送文件。这就是为什么IE总是添加

multipart/form-data; boundary=---------------------------7**********

要解决这个问题,我使用原始Javascript和XMLHttpRequest感谢this answer

var xmlHttpRequest = new XMLHttpRequest();

xmlHttpRequest.open('PUT', url, true);
xmlHttpRequest.setRequestHeader('Content-Type', file.type);
xmlHttpRequest.send(file);

它适用于Chrome,Firefox,IE 11(我没有使用IE< 11进行测试,但根据W3Schools,它适用于IE7 +)。 IE没有更多额外的内容类型。

希望这有帮助

答案 1 :(得分:0)

如果您有权使用xhr,可以执行以下操作:

tr <- extract.bife(output)
texreg(tr)