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

Posted 2023-03-10

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

【英文标题】：Is it possible to request a file from the server directly from html img tag src and loaad it with jwt authentication header?

【发布时间】：2019-12-18 14:18:21

【问题描述】：

我正在尝试请求服务器直接从 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 未经授权的错误。

【问题讨论】：

请问你为什么要那样做？

【参考方案1】：

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