我正在尝试请求服务器直接从 html img 标签中的 src 发送文件，而不是通过 Angular HttpClient 发送 get 请求（我在应用程序的其他任何地方使用 HttpClient）。问题是服务器中的文件endpoint受到 AuthGuard - JWT 策略的保护，这意味着每个请求都必须在标头中包含有效令牌才能获得响应，并且通过尝试直接从 img html 标记中的 src 获取文件，由于令牌从未分配给标头请求，因此始终会发回错误。

我正在使用实现HttpIntericetor的AuthIntericetor来设置标头上的令牌，但这种请求不会到达那里。

请求没有通过拦截器：

import { Injectable } from '@angular/core'

import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
} from '@angular/common/http'
import { Observable } from 'rxjs'

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const idToken = localStorage.getItem('token')
    if (idToken) {
      const cloned = req.clone({
        headers: req.headers.set('Authorization', 'Bearer ' + 
     idToken),
       })
      return next.handle(cloned)
    } else {
      return next.handle(req)
    }
  }
}

这是我试图得到图像的方式：

<img src="serverhost:port/api/document/:imageId" />

显然我得到了401未经授权的错误。