Загрузка файла AWS S3 с использованием Javascript

Question

Я пытаюсь загрузить изображение в AWS S3 с помощью JavaScript. Но когда я пытаюсь загрузить его, я получаю следующую ошибку.

Failed to load https://demoapp.s3-us-west-2.amazonaws.com/IMG_2484.JPG: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.

Код:

<input id="file-chooser" type="file"/>
<button id="upload-button">Upload</button>
<p id="results"></p>

Javascript:

<script>
var credentials = {
    accessKeyId: 'XXXXX',
    secretAccessKey: 'XXXXXXX'
};
AWS.config.update(credentials);
AWS.config.region = 'us-west-2';

// create bucket instance
var bucket = new AWS.S3({params: {Bucket: 'demoapp'}});

var fileChooser = document.getElementById('file-chooser');
var button = document.getElementById('upload-button');
var results = document.getElementById('results');
button.addEventListener('click', function () {
    var file = fileChooser.files[0];
    if (file) {
        results.innerHTML = '';

        var params = {Key: file.name, ContentType: file.type, Body: file, 'Access-Control-Allow-Credentials': '*'};
        bucket.upload(params, function (err, data) {
            results.innerHTML = err ? 'ERROR!' : 'UPLOADED.';
        });
    } else {
        results.innerHTML = 'Nothing to upload.';
    }
}, false);

Я настроил CORS следующим образом.

Конфигурация CORS

Answer 1

Ошибка ... Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource... предполагает неверную конфигурацию CORS, но в этом конкретном случае предполетная проверка не удалась по другой причине: запрос не был отправлен в правильную региональную конечную точку S3 для корзины.

S3 является глобальной службой, но каждая отдельная группа ограничена существованием в одной конкретной области S3. Все регионы знают о правильном расположении всех сегментов, но не могут получить к ним доступ. Только область, которая на самом деле содержит конкретную группу, имеет доступ к этой области, поэтому запросы, поступающие в другие области из-за неправильной конфигурации, не могут быть обработаны.

Когда запрос отправляется не в тот регион, S3 выдает ошибку... вроде. Это на самом деле возвращает 30X HTTP-ответ перенаправления, но перенаправление не включает обычные Location заголовок, так что это не редирект, за которым может следить браузер.

Возможно, более важным для рассматриваемой проблемы является то, что ответ также не содержит заголовков ответов CORS, необходимых для успешной проверки перед полетом... поэтому запрос, отправленный в корзину, правильно настроенную для поддержки CORS, все равно не пройдет проверку перед полетом если запрос отправляется на неправильную региональную конечную точку S3.