KeyCloak-Angular：被CORS策略阻止：请求的资源上没有'Access-Control-Allow-Origin'标头

Question

我正在开发一个web应用程序，我使用angular为前端和keycloak为安全。

我在angular Side上使用以下软件包：

keycloak-js@10.0.1

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

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起源，在angular部分配置为My的客户机是newClient，然而上面的请求针对的是account客户机。

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

以下是我的客户名单：

正如我所提到的，这是我在Angular中指出的客户：

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

我尝试将http://localhost:4200/http://localhost:4200http://localhost:4200/http://localhost:4200/*+和*的变体放入两个客户机的WebOrigins，但这些都不起作用。

这就是我如何在角侧启动keycloak：

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错误将消失。