Загрузка образа S3 из браузера, работающего на одном компьютере, и ошибка CORS на другом компьютере. - PullRequest
0 голосов
/ 14 октября 2018

У меня есть приложение Angular2, и я пытаюсь загрузить набор изображений из S3 и поместить их в zip-файл.Я использую следующий код, полученный из https://gist.github.com/noelvo/4502eea719f83270c8e9

dlImages(urlList, jobName) {

    var zip = new JSZip();
    var count = 0;
    var zipFilename = jobName.split(" ").join("_") + ".zip";
    var img = zip.folder("images");

    console.log(zipFilename);

    urlList.forEach(function (url, idx) {
        //filename and file type should be the same it is in s3
        var fileExtension = url.split('.').pop(-1);
        var realIdx = idx + 1;
        var filename = realIdx.toString().concat(".").concat(fileExtension);
        console.log(url);
        console.log(filename);

        JSZipUtils.getBinaryContent(url, function (err, data) {
            if (err) {
                throw err; // or handle the error
            }
            img.file(filename, data, {binary: true});
            count++;

            if (count == urlList.length) {
                zip.generateAsync({type: 'blob'}).then(function (content) {
                    FileSaver.saveAs(content, zipFilename);
                });
            }
        });
    });
}

Код работает в приложении Heroku, и странно то, что он работает так, как задумано на моей машине для разработки (Chrome Версия 68.0.3440.106) однако это дает ошибку CORS на другом компьютере (Chrome Версия 69.0.3497.100).Конкретная ошибка CORS:

Failed to load url.for.image.in.s3.jpg: No 'Access-Control-Allow-Origin' header is present on the requested resource.  Origin 'https://myherokuapp.herokuapp.com' is therefore not allowed access.

Вышеуказанная ошибка генерируется для каждого URL-адреса изображения в наборе.И моя политика CORS для сегмента

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

Кроме того, в моем файле app.js есть

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PATCH, DELETE, OPTIONS');
    next();
});

Кто-нибудь знает, почему эта ошибка CORS происходит для этой политики CORS?Последующий вопрос заключается в том, почему это работает на одной машине, а не на другой?

РЕДАКТИРОВАТЬ:

Ниже приведены снимки экрана заголовков ответов для каждой из машин при попытке создания образа.быть загруженным.

Это заголовок ответа для машины, которая работает enter image description here

А вот заголовок ответа для машины, которая не работает

enter image description here

Разница в том, что заголовок ответа для машины, которая не работает, не имеет полей ACCESS-CONTROL-ALLOW, но я нене знаю, почему это происходит.Я сделаю некоторые исследования, но если кто-нибудь знает, это было бы очень полезно.

ВТОРОЕ РЕДАКТИРОВАНИЕ:

Также вот заголовок запроса для машины, которая не работает

Origin: https://xxxxx.herokuapp.com

Referer: https://xxxxx.herokuapp.com/yyyyyyyy/5ac2635557c3f70014529d4d

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

Заголовок запроса для компьютера, который работает, такой же, за исключением агента пользователя.

1 Ответ

0 голосов
/ 15 октября 2018

Попробуйте заменить

<AllowedOrigin>https://*</AllowedOrigin>
<AllowedOrigin>http://*</AllowedOrigin>

на

<AllowedOrigin>*</AllowedOrigin>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...