Angular 7 + Firebase: доступ к изображению из источника был заблокирован политикой CORS

Question

Я пытаюсь преобразовать изображения из хранилища Firebase в строку base64, чтобы использовать их в автономном режиме с моим угловым 7 / ionic 4 приложением!(Я использую angularfire2)

Но я получил ошибку, которая говорит

Доступ к изображению в 'https://firebasestorage.googleapis.com/v0/b/*************************.jpg?alt=media&token=' из источника' http://localhost:8100' имеетбыл заблокирован политикой CORS: в> запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Я много искал, и большая часть того, что я обнаружил, создает firebase.json файл и разрешить кросс, но я не знаю, как это сделать с угловой

или другой установлен img.crossOrigin="anonymous", который уже я сделал, но проблема / ошибка все еще там !!

Код для двух функций resposibe для преобразования URL-адреса изображения в base64

getBase64ImageFromURL(url: string) {
    return Observable.create((observer: Observer<string>) => {
      // create an image object
      let img = new Image();
      img.crossOrigin = "anonymous";

      img.src = url;
      if (!img.complete) {
        // This will call another method that will create image from url
        img.onload = () => {
          observer.next(this.getBase64Image(img));
          observer.complete();
        };
        img.onerror = (err) => {
          observer.error(err);
        };
      } else {
        observer.next(this.getBase64Image(img));
        observer.complete();
      }
    });
  }

  getBase64Image(img: HTMLImageElement) {
    // We create a HTML canvas object that will create a 2d image
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    // This will draw image    
    ctx.drawImage(img, 0, 0);
    // Convert the drawn image to Data URL
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  }

Answer 1

Если вы хотите отобразить изображение base 64, вам нужно очистить URL-адрес перед использованием его в шаблоне.

import { DomSanitizer } from '@angular/platform-browser';

...
constructor( private sanitizer: DomSanitizer, .... ) {}
...

profilePicture(binImage)
{
    if(binImage != null)
    {
        var imageData = btoa(binImage);
        //console.log("Base64 Image: ",imageData);
        this.displayImage = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+imageData);
    }
}

в вашем шаблоне всего лишь:

<div class="profile-picture big-profile-picture" *ngIf="displayImage">
    <img src="{{displayImage}}">
</div>

Answer 2

Ионные приложения отображаются с использованием веб-представлений.И:

Веб-представления поддерживают CORS, поэтому важно, чтобы внешние службы правильно обрабатывали запросы из разных источников

Поэтому вы можете использовать собственный HTTP-плагин или настройте CORS на стороне сервера, как объяснено в этом ответе