CORS проблема с холстом, только когда изображение предварительно загружено

Question

Моя проблема возникает только тогда, когда загруженное изображение было предварительно загружено где-то еще. Например, когда я где-то использую тег <img> с атрибутом src.

Посмотрите на этот код:

 <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;" ></canvas>
 
 <img src="https://local-spaces.fra1.digitaloceanspaces.com/test.jpg" width="50"/>
 
 <button onclick="show()">Load Canvas Picture</button>
 
 <script>
function show() {
  	const c = document.getElementById("myCanvas");
    const ctx = c.getContext("2d");

    const img = new Image();
    img.setAttribute('crossOrigin', 'anonymous');


    img.onload = function(){
      ctx.drawImage(img,0,0, 300, 150);
    };
		
    img.src = "https://local-spaces.fra1.digitaloceanspaces.com/test.jpg"
   
}
</script>

Примечание: Если вы видите изображение на холсте правильно, пожалуйста, кэшируйте + перезагрузите браузер, чтобы увидеть ошибку.

Если вы нажмете на кнопку и откроете консоль, вы увидите, что вы получаете CORS-ошибку:

Доступ к изображению в 'https://local -spaces.fra1.digitaloceanspaces.com / test.jpg 'from origin' null 'был заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок' Access-Control-Allow-Origin '.

Сейчасдавайте рассмотрим следующий пример, чтобы убедиться, что он работает без предварительной загрузки изображения: https://jsfiddle.net/akzxp9vs/

Примечание. Чтобы этот пример работал, очень важно, чтобы вы удалили кэш + перезагрузили браузер. .

Только тогда вы увидите, что правильный ответ заголовка возвращает.

Есть идеи, что я могу сделать?

Изображение находится в облаке S3Цифровой океан, называемый Космосом. Само изображение установлено как общедоступное, а для параметра CORS установлено значение:

Answer 1

Браузер должен знать, чтобы проверять наличие разрешений CORS при выполнении HTTP-запроса (т. Е. Включать заголовок Origin и т. Д.).

При создании нового объекта Image он используеткэшированные данные из элемента <img>.

Добавьте атрибут crossorigin к существующему элементу <img> или полностью удалите этот элемент <img>.

Answer 2

Я нашел лучшее решение моей проблемы. Решение @ Квентина принципиально правильно, но просто неосуществимо. Я попытался обновить все теги <img>, однако на моей странице есть десятки пакетов, которые также используют тег <img>.

Например Leaflet. Это как Google Maps, но с Open Street Maps. Вы просто не можете управлять такими атрибутами, как crossorigin в пользовательских значках.

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

const src = new URL(imgUrl);
src.searchParams.append('cors', Date.now());
return src.href;

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