angular - Angular 的 Keycloak 不发送图像的不记名身份验证

Question

我正在运行一个带有 的 Angular 应用程序。 Spring Boot MVC API 与 结合使用 key 斗篷 .我按照 https://www.npmjs.com/package/keycloak-angular 下的说明配置了 Angular。它通常工作正常。
在我的 Angular 组件中，我使用 img标记以包含由我的 Spring Boot 应用程序提供的图像

<img *ngIf="id" src="api/v1/profile/image/{{id}}">

MVC 端点如下所示:

@GetMapping(value = "profile/image/{id}")
    public @ResponseBody byte[] getProfileImage(@AuthenticationPrincipal Jwt jwt, @PathVariable String id)
            throws IOException {
            ...
            }

问题是 我在第一次加载图像时收到 401 响应代码。
以下是我的主要发现:

图像的负载确实(从不)包含“授权:承载
...”请求 header (与请求相反，通过HttpClient )

第一个失败的请求将有 set-cookie响应头

连续请求将包含 cookie 作为一部分
请求 header ，并且将工作

谁能指出，我能做什么？可以以某种方式配置 keycloak，即图像的负载将包含不记名身份验证 header 吗？

Answer 1

<img *ngIf="id" src="api/v1/profile/image/{{id}}">

这种图像是由浏览器加载的，而不是由 HttpClient 加载的。 .和HttpClient已配置为注入(inject) Authorization在您的情况下是 header ，而不是浏览器，因此这是问题的根本原因。
您可以从 URL api/v1/profile/image/{{id}} 加载图像内容与 HttpClient然后使用 base64 编码将该图像内容内联到 HTML 中:

<img src="data:<correct content type>;base64, <base 64 data of the image content>" />

e.g.:
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
        9TXL0Y4OHwAAAABJRU5ErkJggg==" />

这是小图像的好解决方案(这种方法通常用于社交图标)。
或者，您可以在创建图像之前以与服务提供商所期望的格式相同的格式将授权保存到 cookie 中)。然后浏览器将在每个请求中发送该授权 cookie。当然，跨域 cookie 可能存在问题。