Unauthorized get src image

Ionic Framework
1

I need to show an image of an api, when I put the address on the srcI have the error of unauthorized GET.When I try to do the access process by Postman managed to download the image and view it normally. In the app I’m in developing I need to show it without downloading. I’ve tried several methods: Interceptor, convert the image to blob, convert the image to base64 but nothing worked. I will put here some of my attempts

First try (Interceptor)

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { Camera } from '@ionic-native/camera/ngx';
import { Device } from '@ionic-native/device/ngx';
import { DocumentViewer } from '@ionic-native/document-viewer/ngx';
import { File } from '@ionic-native/file/ngx';
import { FileOpener } from '@ionic-native/file-opener/ngx';
import { FilePath } from '@ionic-native/file-path/ngx';
import { FileTransfer } from '@ionic-native/file-transfer/ngx';
import { HTTP } from '@ionic-native/http/ngx';
import { IonicStorageModule } from '@ionic/storage';
import { LocalNotifications } from '@ionic-native/local-notifications/ngx';
import { NativeStorage } from '@ionic-native/native-storage/ngx';
import { Network } from '@ionic-native/network/ngx';
import { QRScanner } from '@ionic-native/qr-scanner/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { SQLite } from '@ionic-native/sqlite/ngx';
import { ImageModalPage } from './image-modal/image-modal.page';
import { DatePipe } from '@angular/common';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { InterceptorService } from './interceptor.service';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    HttpClientModule,
    IonicStorageModule.forRoot(),
    AppRoutingModule,
  ],
  providers: [
    Camera,
    DatePipe,
    Device,
    DocumentViewer,
    File,
    FileOpener,
    FilePath,
    FileTransfer,
    HTTP,
    ImageModalPage,
    LocalNotifications,
    NativeStorage,
    Network,
    QRScanner,
    StatusBar,
    SplashScreen,
    SQLite,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

interceptor.service.ts

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, from } from 'rxjs';
import { mergeMap, tap } from "rxjs/operators";
import { Storage } from '@ionic/storage';



@Injectable({
  providedIn: 'root'
})
export class InterceptorService  implements HttpInterceptor{

  constructor(private storage: Storage) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    throw new Error('Method not implemented.');
  }

  ntercept(req: HttpRequest<any> , next: HttpHandler): Observable<HttpEvent<any>> {
    let promise = this.storage.get('my_token');
    return from(promise).pipe(mergeMap(token => {
      let clonedReq = this.addToken(req,token)

      return next.handle(clonedReq).pipe(tap(
        success => console.log(success),
        err => {
          console.log(err)
        }
      ));

    }));
  }

  private addToken(request: HttpRequest<any>, token: any){
    if (token) {
      let clone:HttpRequest<any>;
      console.log(token)
      clone = request.clone({
        setHeaders:{
          Authorization: `Bearer ${token}`
        }
      })
      return clone;
    }
    return request
  }
}

HTML:

 <img *ngIf="image" [src]="imagem"width="100%" height="100%" alt="Image"/>

Second try (base64 image)

mypage.page.ts

ionViewWillEnter(){

    this.apiService.loadingMSG().then(()=>{
        this.http.get(myurl + this.maloteSelecionado.id, {},{
            'Cookie' : this.token
        })
        .then((data)=>{
            let s = data.data
            var emBase64 = btoa(s)
            this.imagem = 'data:image/jpeg;base64,' + emBase64;
            console.log(this.imagem)
            this.verificaImagem = 1;
            this.apiService.loadingController.dismiss();
        }).catch((error)=>{
            console.log(error)
        })
    })

HTML:

 <img *ngIf="image" [src]="imagem"width="100%" height="100%" alt="Image"/>

Resolt of when console data:

Note:

I’m using ionic 5.4, cordova 10 and for http requests I’m using the native http plugin (I can’t switch to httpClient because I don’t have access to the server, which returns a CORS error)

2

Not sure, but sometimes you run in URLsanitiser issues, if you try to hook up an image to an external source

https://angular.io/api/platform-browser/DomSanitizer

3

i try use domSanatize too but i receive this error too