Загрузка изображений из разных источников в js

Question

Я использую Chrome 79.

Я пытаюсь начать загрузку изображения на странице html. Изображение находится на том же сервере, что и веб-страница, но оно подается через сервер nginx через другой порт. Это, очевидно, заставляет меня сталкиваться с проблемами безопасности из разных источников.

Сначала я попытался использовать стандарт

var a = document.createElement('a');
a.download = "file.bmp";
a.href = "http://xxxxxxx/xxx/somefile.bmp";
document.body.appendChild(a);
a.click();
a.remove();

Интересно, что это приводит меня к поведению, что мое изображение отображается в новой вкладке, но не скачивается. Я полагаю, это из-за причин сердечной недостаточности

После прочтения обсуждения этой темы c в: Chrome 65 блоков перекрестного происхождения . Обходной путь на стороне клиента для принудительной загрузки?

Я попытался использовать представленный там подход, используя функцию извлечения. К сожалению, это не решает мою проблему. Я получаю ответ с «непрозрачным» типом, и мой BLOB-объект не определен ...

var url = "http://xxxxxxxxx/xxx/somefile.bmp";
fetch(url, {
  mode: 'no-cors'})
  .then(function(response){handleBlob(response);})      
  .catch(e => console.error(e));

-------

function handleBlob(response)
{
   var blob = response.blob;
   var blobUrl = URL.createObjectURL(blob);
   var ImageTest = document.getElementById("DummyLink");      
   ImageTest.download = "file.bmp";
   ImageTest.href = blobUrl;
   ImageTest.click();           
}

Я подумал, что все это очень странно - имя сервера ресурса совпадает с именем веб-страницы, поэтому я бы Предположим, что здесь нет реальной угрозы безопасности ...

Будем весьма благодарны за любые предложения или обходные пути по запуску загрузки образа на диск.

Answer 1

Не уверен на 100%, что вы пытаетесь сделать.

var url = 'http://webpage.com/images/images.jpg',
var img = document.createElement('img');
img.src = src;
document.getElementById("DummyLink").appendChild(img);