时间戳

首页 > 解决方案 > 是否可以直接从 html img 标签 src 向服务器请求文件并使用 jwt 身份验证标头加载它？

angular - 是否可以直接从 html img 标签 src 向服务器请求文件并使用 jwt 身份验证标头加载它？

问题描述

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

我正在使用实现 HttpInterceptor 的 AuthInterceptor 在标头上设置令牌，但这种请求没有到达那里。

请求没有通过拦截器：

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 未经授权的错误。

标签： angularhttpauthenticationgetjwt

解决方案

无法设置浏览器执行的 get 请求的标头。一个解决方案可以是使用签名 URL。这意味着临时身份验证令牌将成为 URL 本身的一部分。

推荐阅读