У меня есть приложение 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?Последующий вопрос заключается в том, почему это работает на одной машине, а не на другой?
РЕДАКТИРОВАТЬ:
Ниже приведены снимки экрана заголовков ответов для каждой из машин при попытке создания образа.быть загруженным.
Это заголовок ответа для машины, которая работает
А вот заголовок ответа для машины, которая не работает
Разница в том, что заголовок ответа для машины, которая не работает, не имеет полей 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
Заголовок запроса для компьютера, который работает, такой же, за исключением агента пользователя.