Блог

Это мой код THREE JS:

 var aws_image_path = "path-to-aws-s3-bucket-image"
myTextureLoader = new THREE.TextureLoader();
myMap = myTextureLoader.load(aws_image_path)
// Further I used myMap for SpriteMaterial.
  

Этот код работает должным образом в веб-браузере с использованием https://my_url/

Я добавляю этот URL-адрес в iframe в приложении angular.

Мой ионный код:

 <ion-grid>
    <ion-row>
        <ion-col>
            <iframe class="iframe" [src]="https://my_url/" allow="camera;microphone"></iframe>
        </ion-col>
    </ion-row>
</ion-grid>

  

В приложении S3 изображение не загружается. Отображается ошибка CORS.

Ошибка:

 Access to image at 'path-to-aws-s3-bucket-image' from origin 'https://my_url/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
  

Конфигурация AWS CORS:

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

Я использовал DomSanitizer в IFRAME, но показываю ту же ошибку.