S3存储桶上传错误403:预检请求检查错误

时间:2017-03-01 12:06:58

标签: jquery amazon-web-services amazon-s3

我正在尝试直接上传S3存储桶上的文件,这将减少我服务器上的负载。

我的代码在控制台中显示此错误:

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.

我尝试了几件事,你能不能查看我的代码并说出要做出哪些更正:

<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>

0 个答案:

没有答案