Нет заголовка «Access-Control-Allow-Origin» на запрошенном ресурсе, периодически показанном с S3

Question

У меня есть функция, которая GET выводит изображение / видео из корзины S3. Когда мое приложение загружается впервые, функция возвращает изображение / видео идеально. Но если я загружаю новое изображение / видео и получаю новый подписанный URL-адрес для его извлечения, я получаю следующую ошибку (и изображение / видео не загружается):

Доступ к XMLHttpRequest по адресу https://s3 -bucket-name.s3.amazonaws.com / blah / blah 'из источника' http://localhost:3000' заблокирован политикой CORS: Нет ' Заголовок Access-Control-Allow-Origin 'присутствует в запрашиваемом ресурсе.

Я установил разрешения для моего S3-контейнера:

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

Мой код выглядит так:

const request = new XMLHttpRequest();
const media = document.createElement('img');

request.onprogress = (e) => {
  updateLoadingBar(e.percent);
};

request.onreadystatechange = (e) => {
  if (request.readyState === 4) {
    media.src = URL.createObjectURL(request.response);
  }
};

request.responseType = 'blob';
request.open('get', url);
request.send();

Несколько быстрых заметок:

1. URL-адрес со знаком S3 создается в моем бэкэнд-API каждый раз с использованием одной и той же функции.
2. Если у меня открыты инструменты разработчика Chrome и на вкладке Network установлен флажок Disable cache, он нормально загружается.

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

Answer 1

Отключение кэша в XMLHttpRequest позволило ему работать:

request.open('get', url);
request.setRequestHeader('cache-control', 'no-cache, must-revalidate, post-check=0, pre-check=0');
request.send();

Если бы кто-то мог объяснить почему в комментариях, я был бы чрезвычайно благодарен:)