django - 具有 CORS 文件上传功能的 Amazon S3； s3upload.js 示例

Question

我正在尝试设置一个 Django 应用程序以允许 CORS 上传到 Amazon S3 存储桶——运气为 0。我在 Firefox 和 Chrome 中不断收到 403 Forbidden 消息，无论是在本地主机上还是来自 Web 服务器。我已验证我的签名计算正确(如下所述)，并且我的存储桶策略是允许来源 *、允许 PUT/POST/GET 方法并允许 header *。我的访问 key / secret key 对是正确的，允许我通过 Cyber​​duck 等软件访问存储桶。我还能检查什么，或者如何进一步调试？我觉得我已经探索了所有可能的途径

我正在尝试关注 demo ，只需修改编码以匹配此 SO question .这允许我的签名匹配 this Amazon S3 test file .我的签名生成代码在这里:

s3_bucket_name = settings.S3_BUCKET_NAME
s3_access_key = settings.S3_ACCESS_KEY
s3_secret_key = settings.S3_SECRET_KEY

object_name = request.GET.get('s3_object_name')
mime_type = request.GET.get('s3_object_type')

expires = int(time.time()+300)
amz_headers = "x-amz-acl:public-read"

put_request = "PUT\n\n%s\n%d\n%s\n/%s/%s" % (mime_type, expires, amz_headers, s3_bucket_name, object_name)

hashed = hmac.new(s3_secret_key, put_request, sha1)
signature = binascii.b2a_base64(hashed.digest())[:-1]
signature = urllib.quote_plus(signature.strip())

url = 'https://%s.s3.amazonaws.com/%s' % (s3_bucket_name, object_name)

signed_request = '%s?AWSAccessKeyId=%s&Expires=%d&Signature=%s' % (url, s3_access_key, expires, signature)

pdb.set_trace()

return HttpResponse(json.dumps({
    'signed_request': signed_request,
     'url': url
  }), mimetype='application/json')

我的上传功能:

function s3_upload(filename) {
filename = filename.split('\\').pop();
var s3upload = new S3Upload({
    file_dom_selector: '#video_file',
    s3_sign_put_url: 'signS3put/',
    s3_object_name: filename,
    onProgress: function(percent, message, publicUrl, file) {
      console.log('Upload progress: ', percent, message);
    },
    onFinishS3Put: function(public_url, file) { 
      console.log('Upload finished: ', public_url);
    },
    onError: function(status, file) {
      console.log('Upload error: ', status);
    }
});
}

还有我的文件输入按钮:

video_form.append('<input class="input-block-level"' +  
            'autocomplete=off id="video_file" name="video_file"' +  
            'type=file required="required" onchange="' + 
                    'var filename = $(this).val();' + 
                    's3_upload(filename);" />');

这在本地开发服务器和远程服务器上都发生在我身上，所以这不是 SO post说 Chrome 阻止本地服务器 CORS 调用。

感谢您的提示!

Answer 1

所以我解决了这个问题，希望这能帮助其他一些人(虽然其他人似乎没有这个问题，所以也许我的设置只是不同)。我的问题原来出在 s3upload.js 库上。两件事情:

我想做authenticated-read，在示例sign_s3 View 中设置为public-read。只是在 View 中更改它并没有帮助——x-amz-acl:public-read 也在 s3upload.js 中的函数 uploadToS3(第 107 行)中硬编码。因此，您必须更改它以匹配您的 View ，否则我认为签名编码永远不会与 CORS 请求 header 匹配。

特殊字符 =、+ 和/正在杀死我。在此 Amazon S3 article 的底部提到了它们作为要注意的事情，所以我确保散列算法取代了它们。问题是，即使我认为我的散列算法正确地将这三个字符替换为转义字符，s3upload 仍在将它们解码并重新编码为 =、+ 和/。我在 executeOnSignedUrl 中更改了一行(第 71 行):

  return callback(result.signed_request, result.url);
  //return callback(decodeURIComponent(result.signed_request), result.url);

现在它神奇地起作用了!请注意，这与 this SO solution 非常相似。 ，仅特定于 s3upload.js 库。

作为旁注——S3似乎也不喜欢键名中的空格(我认为我确实在亚马逊文档的某个地方读过这个)，这是我遇到的另一个问题......