AWS S3 fine-uploader, error: Cross-Origin Request Blocked

Question

I have implemented Fine-Uploader for AWS-S3 service in my Django application. I have followed the general instructions from the official documentation for Django based applications.

This is my settings.py:

AWS_ACCESS_KEY_ID = 'my_ACCESS_KEY_ID'
AWS_SECRET_ACCESS_KEY = 'my_SECRET_ACCESS_KEY'
AWS_STORAGE_BUCKET_NAME = 'my_BUCKET_NAME'
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME

AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400',
}

S3DIRECT_REGION = 'us-west-2'

AWS_LOCATION = 'static'

STATIC_URL = 'https://%s/%s/' % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)

STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

AWS_MAX_SIZE = 15000000

This is my javascript:

  $('#fine-uploader-s3').fineUploaderS3({
            template: 'qq-template-s3',
            request: {
                endpoint: "https://s3.console.aws.amazon.com/s3/buckets/my_Bucket/static/",
                accessKey: "my_accessKey"
            },
            signature: {
                endpoint: "https://s3.console.aws.amazon.com/s3/buckets/my_Bucket/static/"
            },
            uploadSuccess: {
                endpoint: "https://s3.console.aws.amazon.com/s3/buckets/my_Bucket/static/",
                params: {
                    isBrowserPreviewCapable: qq.supportedFeatures.imagePreviews
                }
            },
            iframeSupport: {
                localBlankPagePath: "https://s3.console.aws.amazon.com/s3/buckets/my_Bucket/static/"
            },
            cors: {
                expected: true
            },
            chunking: {
                enabled: true
            },
            resume: {
                enabled: true
            },
            deleteFile: {
                enabled: true,
                method: "POST",
                endpoint: "https://s3.console.aws.amazon.com/s3/buckets/my_Bucket/static/"
            },
            validation: {
                itemLimit: 5,
                sizeLimit: 15000000
            },
            thumbnails: {
                placeholders: {
                    notAvailablePath: "/server/not_available-generic.png",
                    waitingPath: "/server/waiting-generic.png"
                }
            },
            callbacks: {
                onComplete: function(id, name, response) {
                    var previewLink = qq(this.getItemByFileId(id)).getByClass('preview-link')[0];

                    if (response.success) {
                        previewLink.setAttribute("href", response.tempLink)
                    }
                }
            }
        });

my views.py is the copy-paste from the tutorial. However, when I try to upload a file a get the following error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3.console.aws.amazon.com/s3/buckets/my_bucket/static/ Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

That is confusing because in my S3 bucket I have set full read-write access. Furthermore, I have set the CORS configuration as the following:

 <AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<ExposeHeader>ETag</ExposeHeader>
<AllowedHeader>*</AllowedHeader>

Do you have any idea about what I am doing wrong?. Thank you very much for your help!

Regards

Answer 1

Are you sure you installed and configured CORS properly for Django:

1. Install: pip install django-cors-headers

2. Add module to installed apps:

   INSTALLED_APPS = ( ... 'pipeline', 'corsheaders' )

3. Add to Middleware classes:

   MIDDLEWARE_CLASSES = ( 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.BrokenLinkEmailsMiddleware', 'django.middleware.common.CommonMiddleware', ...)

*Notice that CorsMiddleware should be configured before Django's CommonMiddleware (if you are using Django's USE_ETAGS = True setting), otherwise the CORS headers will be lost from the 304 not-modified responses, causing errors in some browsers.

4. Finally for Django, configure the CORS servers white list. Here you should configure S3:

   CORS_ORIGIN_ALLOW_ALL = False

   CORS_ORIGIN_WHITELIST = ( <'YOURDOMAIN>[:PORT]', )