S3 bucket upload error 403: Preflight Request check Error

Question

I am trying to directly upload file on the S3 bucket that will reduce the load on my server.

My code is showing this error in the console:

XMLHttpRequest cannot load https://xxxxxx.s3.amazonaws.com/xxxxx/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://xxxxxxxxxxx.herokuapp.com' is therefore not allowed access. The response had HTTP status code 403.

I tried several things, can you please look in my code and tell what corrections to make:

<script>
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "https://xxxxxxxxxxx.herokuapp.com", true);
        xhr.setRequestHeader("Access-Control-Allow-Origin", "https://xxxxxxxxxxxxxx.herokuapp.com");
        xhr.onload = function () {
            console.log(xhr.responseText);
        };

        $(document).ready( function() {
        $('.direct-upload').each( function() {
            var form = $(this);

            form.fileupload({
                url: form.attr('action'),
                //headers:{"Access-Control-Allow-Origin": "https://xxxxxx.herokuapp.com"},
                type: 'POST',
                datatype: 'xml',
                add: function (event, data) {

                    // Message on unLoad.
                    window.onbeforeunload = function() {
                        return 'You have unsaved changes.';
                    };

                    // Submit
                     xhr.send();

                    data.submit();
                },
                progress: function(e, data){
                    // This is what makes everything really cool, thanks to that callback
                    // you can now update the progress bar based on the upload progress.
                    var percent = Math.round((data.loaded / data.total) * 100);
                    $('.bar').css('width', percent + '%');
                },
                fail: function(e, data) {
                    // Remove 'unsaved changes' message.
                    window.onbeforeunload = null;
                    $('.bar').css('width', '100%').addClass('red');
                },
                done: function (event, data) {
                    window.onbeforeunload = null;
                    // Fill the name field with the file's name.
                    $('#upload_original_name').val(data.originalFiles[0].name);
                    $('#upload_custom_name').val(data.originalFiles[0].name);
                },
            });
        });
    });

    </script>

can you please elaborate as I am new to this .... Can tell exactly what to change in my code .... -Thanks — Anonymous, Mar 01 '17 at 12:25
Does this answer your question? [S3 - Access-Control-Allow-Origin Header](https://stackoverflow.com/questions/17533888/s3-access-control-allow-origin-header) — miken32, Aug 15 '22 at 18:39

score 0 · Answer 1 · answered Aug 15 '22 at 18:31

This is an old question but was ranked high in my Google search.

AWS documentation tells the conditions for a successful request:

The request's Origin header must match an AllowedOrigin element.

The request method (for example, GET or PUT) or the Access-Control-Request-Method header in case of a preflight OPTIONS request must be one of the AllowedMethod elements.

Every header listed in the request's Access-Control-Request-Headers header on the preflight request must match an AllowedHeader element.

In practice, one might use e.g. following CORS settings for the bucket (which allows POST and PUT from given domain and GET requests for anyone):

[
{
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "GET",
        "POST",
        "PUT"
    ],
    "AllowedOrigins": [
        "https://do.main"
    ],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 3000
},
{
    "AllowedHeaders": [],
    "AllowedMethods": [
        "GET"
    ],
    "AllowedOrigins": [
        "*"
    ],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 3000
}

]

< 300 views in 5 years, it couldn't have been that high. – miken32 Aug 15 '22 at 18:39 — miken32, Aug 15 '22 at 18:39

S3 bucket upload error 403: Preflight Request check Error

1 Answers1