keycloak-angular：被CORS策略阻止：所请求的资源上不存在“ Access-Control-Allow-Origin”标头

Question

我正在开发一个Web应用程序，并且我将angular用于前端，将keycloak用于安全性。

我在斜边使用以下包装：

keycloak-js@10.0.1

keycloak-angular@8.0.1

在前端（角度应用程序）上，我尝试使用以下服务检索用户详细信息：

import { Injectable } from '@angular/core';
import { KeycloakService } from 'keycloak-angular';

@Injectable({
  providedIn: 'root'
})
export class JwtDecoderService {

  public profile;      
  
  getUserProfile(){
  
   this.keycloakService.loadUserProfile().then(x => this.profile = x)
 
  }           
  constructor(public keycloakService: KeycloakService) {}        
}

我认为，对 loadUserProfile（）的调用向密钥斗篷服务器的客户端（帐户）发起GET请求。

我收到CORS错误消息作为响应，请参见下文：

我已经尝试为所使用的客户端添加localhost：4200作为Web Origins，但在有角部分上配置为我的客户端是newClient，尽管如此，上述请求还是针对帐户客户端。

最后，我将*作为所有涉及newClient和帐户的客户的Web来源。

这是我的客户列表：

正如我提到的，这是我用角表示的客户：

export const environment = {
  production: false,
  keycloakConfig: {
    clientId: 'newClient',
    realm: 'SportEmploy',
    url: 'http://localhost:8083/auth'
  }
};

newClient配置： 1。

2。

帐户客户端配置： 1。

2。

我试图将两个客户的变体形式的WebOrigins放入 http：// localhost：4200 / http：// localhost：4200 http：// localhost：4200 / * + 和*，这些都不起作用。

这是我在有角度的一面启动钥匙斗篷的方法：

import {KeycloakService, KeycloakOptions} from 'keycloak-angular'
import { environment } from './environments/environment'

export function initializer(keycloak: KeycloakService): () => Promise<any> {

    const options: KeycloakOptions = {
      
        config: environment.keycloakConfig
    };

    return (): Promise<any> => keycloak.init(options);

}

任何想法在我的密钥斗篷配置中可能出什么问题吗？

Answer 1

我知道这是一个老问题，但鉴于我遇到了同样的问题并且我找到了解决方法，我想在这里分享多年。

如果您将角色 account/viewProfile 设置为您的用户 like this cors 错误会消失。

我已经为此打开了一个 JIRA https://issues.redhat.com/browse/KEYCLOAK-18523 供参考

Answer 2

使用Keycloak的隐式流代替默认的授权码

keycloak.init({
...
initOptions: {
      flow: 'implicit',
}
}

和“访问类型”选项设置为“公共”