keycloak- angular: заблокировано политикой CORS: в запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin

Question

Я разрабатываю веб-приложение и использую angular для внешнего интерфейса и keycloak для обеспечения безопасности.

Я использую следующие пакеты на стороне angular:

keycloak-js@10.0.1

keycloak-angular@8.0.1

Во внешнем интерфейсе (angular приложение) Я пытаюсь получить данные пользователя, используя следующие service:

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-запрос к клиенту (учетной записи) сервера keycloak.

I получите в ответ сообщение об ошибке CORS, см. ниже:

I have tried to add localhost:4200 as Web Origins for the clients used, the client configured as mine on angular part is newClient, nevertheless the above request is targeting the account client.

In the end I put * as web origin for all clients involved both newClient and account.

Here are my list of clients:

As I mentioned this is the client I have indicated in angular:

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

newClient configuration: 1.

2.

account client configuration: 1.

2. введите описание изображения здесь

Я попытался поместить в WebOrigins обоих клиентов варианты http://localhost: 4200 / http://localhost: 4200 http://localhost: 4200 / * + и *, ничего из этого не сработало.

Вот как я запускаю keycloak на стороне angular:

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?

Answer 1

Использовать неявный поток для Keycloak вместо кода авторизации по умолчанию

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

и опции типа доступа для Publi c