S3图像下载中的CORS错误（角度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配置

<?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状态

S3图片网址直接在图片标签中起作用。

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

但是我希望Blob类型的图像具有裁剪功能。

Answer 1

从AWS S3存储桶端发出的问题

当我们在域名之后附加目录名称时，S3 URL会导致CORS错误。

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);