Как получить файл из Azure Blob Storage для отображения в браузере, используя C# api и Angular

Question

Мой код API возвращает файл, без проблем:

[HttpGet("downloadProfilePic")]
    public async Task<FileStreamResult> DownloadProfilePic()
    {
        try
        {
            var containerName = "profilepics";
            string storageConnection = _config.GetSection("StorageConnectionString").Value;

            CloudStorageAccount cloudStorageAccount = CloudStorageAccount.Parse(storageConnection);
            CloudBlobClient blobClient = cloudStorageAccount.CreateCloudBlobClient();
            CloudBlobContainer blobContainer = blobClient.GetContainerReference(containerName);
            CloudBlockBlob blockBlob = blobContainer.GetBlockBlobReference((await _userService.GetUserGuid().ConfigureAwait(false)).ToString());

            MemoryStream memoryStream = new MemoryStream();
            await blockBlob.DownloadToStreamAsync(memoryStream).ConfigureAwait(false);
            memoryStream.Position = 0;
            return FileStreamResult(memoryStream, "image/png");
        }
        catch (Exception ex)
        {
            throw new Exception(ex.Message);
        }
    }

Мой angular сервис не получает должным образом:

downloadProfilePic(): Observable<any> {
    return this.http.get<any>(this._url + '/downloadProfilePic');
}

Перехватчик ошибок запускается, и я не Не знаю, почему:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request).pipe(catchError(err => {
  if (err.status === 401) {
    // auto logout if 401 response returned from api
    this.authenticationService.logout();
    location.reload(true);
  }

  const error = err.error || err.statusText;
  return throwError(error ? error : err);
}))

}

Снимок экрана ошибки:

Что я здесь делаю неправильно? Я хочу отобразить этот memoryStream в браузере.

РЕДАКТИРОВАТЬ: удалил errorHandler в angular код службы.

Отследил стек вызовов назад и обнаружил:

Answer 1

На самом деле, нет необходимости загружать ProfilePi c в сервис angular. Если вы просто используете <img src="<your.api.path.goes.here>" в своем шаблоне / html коде, ваш контроллер API вернет файл без необходимости go через службу angular.

Answer 2

Ошибка, которую вы получаете, является общей c ошибкой, установленной HttpErrorResponse, когда код ответа находится в успешном диапазоне, но ошибка все еще возникает в обработчике Xhr. Хотя JSON синтаксический анализ может быть не единственной причиной возникновения этой ошибки, вполне вероятно, что это ответ по умолчанию. Обработчик Xhr пытается выполнить синтаксический анализ ответа, если responseType был установлен на «json», что является значением по умолчанию, если не был предоставлен responseType.

Попробуйте изменить тип ответа на «blob», так как вы загружаете стрим из сервиса.

downloadProfilePic(): Observable<any> {
  return this.http.get(`${this._url}/downloadProfilePic`, { responseType:'blob' });
}