CORS issue with a PreSigned S3 URL for file upload

I try to upload files in an S3 bucket in eu-west-2 region:

In the django-view i coded:

conn = boto.connect_s3(settings.AWS_ACCESS_KEY_ID,settings.AWS_SECRET_ACCESS_KEY,host=settings.AWS_S3_HOST)
     try:
        conn = boto.connect_s3(settings.AWS_ACCESS_KEY_ID,settings.AWS_SECRET_ACCESS_KEY,host=settings.AWS_S3_HOST)
    except:
        print "S3connection Failed"
    else:
        print "S3Connection OK"

Then i Generate the pre-signed url

try:
    S3url = conn.generate_url_sigv4(secondsPerDay, "PUT", bucket=settings.AWS_STORAGE_BUCKET_NAME, key=path, force_http=True)
except:
    print "generate_url_sigv4 failed"
else:
    print "generate_url_sigv4 OK"
    print S3url

and S3url is: S3url= https://MyBucketName.s3-eu-west-2.amazonaws.com/pathtofile/0.MOV?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=AWSsignature&X-Amz-Date=20170724T120524Z&X-Amz-Credential=MyKey%2F20170724%2Feu-west-2%2Fs3%2Faws4_request

Using Curl i can upload a video file with :

curl -v -T "0.MOV" --header "Content-Type:binary/octet-stream" "https://MyBucketName.s3-eu-west-2.amazonaws.com/pathtofile/0.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=AWSsignature&X-Amz-Date=20170724T122024Z&X-Amz-Credential=MyKey%2Feu-west-2%2Fs3%2Faws4_request"

So for me the generation of pre-signed url in django/python is ok.

By the way thanks to How to properly upload an object to AWS S3? contributors

The problem comes when i try to use the presigned url through and ajax request. Google Chrome states:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8000' is therefore not allowed access. The response had HTTP status code 403.

I try many combinations of

settings = $.extend(true, {}, {
    xhr: function () {
        var xhrobj = $.ajaxSettings.xhr();
        return self._initXhr(xhrobj, previewId, self.getFileStack().length);
    },
    url:S3url,
    type: 'PUT',
    cache: false,
    processData: false,
    success: fnSuccess,
    complete: fnComplete,
    error: fnError,
    crossDomain: true,
    headers: {
            'Access-Control-Allow-Headers': '*',
            'Content-Type': 'binary/octet-stream',
        },
}, self.ajaxSettings);

self.ajaxRequests.push($.ajax(settings));

Apparently, the browser and the curl is blocking request to another server. The web page is coming from http://127.0.0.1:8000 and the request is towards s3-eu-west-2.amazonaws.com.

Curl does not take this precaution.

By the way, i configure the S3 bucket like this:

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

That's the defaut config except i add the / line.

So how could i solve this CORS issue, what do i miss ?

Thanks

链接地址: http://www.djcxy.com/p/39046.html

上一篇: AWS Pre签名的URL

下一篇: CORS问题与PreSigned S3 URL进行文件上传