如何在Angular 7中使用受密码保护的Web服务

Question

我正在使用受密码保护的Web服务，我拥有用于​​访问该Web服务的用户名和密码，以及如何将其实现到Angular 7中。

import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class ImageService {

constructor(private httpClient: HttpClient) { }
userName: String = "Xyz";
password: String = "yOsadfsdasV";
domain: String = "DIR";
getImage(imageUrl: string): Observable {
const headers = new HttpHeaders(

  {

    'Authorization': 'Bearer ' + btoa(`${this.userName}:${this.password}:${this.domain}`)

  });    

return this.httpClient.get(imageUrl, {headers: headers,  responseType: 'blob' });
}
}

上面的代码imageUrl是我的Web服务的URL，此代码的问题是我在弹出窗口下方出现：

上面的代码有什么问题？或需要添加什么？请帮忙。我正在做角度7。 谢谢。