Ошибка CORS при загрузке изображения S3 в угловых 6

Question

Попытка загрузить изображение S3 в угловом формате, но всегда выдает ошибку CORS

Угловой код для загрузки изображения

getImage(): void {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    console.log("test",xhttp.response,xhttp.status);
  };
  xhttp.open("GET", "https://s3.ap-south-1.amazonaws.com/rajubhai/20190318ubuntu1904jack.jpg", true);
  xhttp.responseType = "blob";
  xhttp.send();  
  }

S3 Config

<?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>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration> 

Получение ошибки в консоли

Но на вкладке сети отображается статус 200

URL-адрес изображения S3 напрямую работал в теге изображения.

<img [src]="https://s3.ap-south-1.amazonaws.com/rajubhai/20190318ubuntu1904jack.jpg"/>

Но я хочу, чтобы изображение в типе BLOB-объектов выполняло функцию обрезки.

Answer 1

Проблема со стороны AWS S3

S3 Ошибка CORS URL-адреса при добавлении имени каталога после имени домена.

xhttp.open("GET", "https://s3.ap-south-1.amazonaws.com/rajubhai/3c8898e3-74a0-49a9-a03b-480b3253906bcrop_image_.png", true);

Теперь измените URL-адрес и добавьте имя каталога перед именем домена иработает.

xhttp.open("GET", "https://rajubhai.s3.ap-south-1.amazonaws.com/3c8898e3-74a0-49a9-a03b-480b3253906bcrop_image_.png", true);