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

【问题标题】：keycloak-angular: Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resourcekeycloak-angular：被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头
【发布时间】：2020-11-23 10:08:42
【问题描述】：

我正在开发一个网络应用程序，我使用 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() 的调用会向 keycloak 服务器的客户端（帐户）发起 GET 请求。

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

我尝试将 localhost:4200 添加为所用客户端的 Web Origins，在 Angular 部分配置为我的客户端是 newClient，但上述请求是针对帐户客户端的。

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

这是我的客户名单：

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

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

新客户端配置： 1.

2。

帐户客户端配置： 1.

2。

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

这就是我在有角度的一面开始 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);

}

你知道我的 keycloak 配置有什么问题吗？

【问题讨论】：

标签： angular cors keycloak

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

使用 Keycloak 的隐式流程而不是默认授权码

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

和公共访问类型选项

【讨论】：

嗨，我应该在哪里应用这些更改？
keycloakConfig: { clientId: 'newClient', realm: 'SportEmploy', url: 'http://localhost:8083/auth', flow: 'implicit' } 不是这样工作的