键斗篷-角:被CORS策略阻塞:请求的资源上没有“访问控制-允许-源”头。

Question

我正在开发一个网络应用程序，我使用角作为前端和钥匙斗篷的安全。

我在角边使用以下软件包：

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()的调用将向keycloak服务器的客户端(帐户)发起一个GET请求。

我得到一个CORS错误消息作为响应，请参阅下面：

​

​

我尝试添加localhost:4200作为所使用的客户端的Web，在角部分上配置为我的客户端的客户机是newClient，但是上面的请求是针对帐户客户端的。

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

这是我的客户名单：

​

​

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

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

newClient配置： 1。

​

​

帐户客户端配置： 1。

​

​

我尝试将两个客户端的WebOrigins ( 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设置为用户像这样，则cors错误将消失。

我为这个fyi开了一个JIRA https://issues.redhat.com/browse/KEYCLOAK-18523

Answer 2

对Keycloak使用隐式流而不是默认授权代码。

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

和公共访问类型选项