keycloak-angular: Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

2
votes

I am developing an web app and I am using angular for front-end and keycloak for security.

I am using the following packages on angular side:

[email protected]

[email protected]

On front-end (angular app) I am trying to retrieve the user details using the following 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) {}        
}

As I think, the call to the loadUserProfile() initiates a GET request to a client (account) of the keycloak server.

I get a CORS error message as a response, see below:

enter image description here

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:

enter image description here

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. enter image description here

2. enter image description here

account client configuration: 1. enter image description here

2. enter image description here

I have tried to put into WebOrigins of the both clients variations of http://localhost:4200/ http://localhost:4200 http://localhost:4200/* + and * , anything of this did not work.

This is how I start keycloak on angular side:

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);

}

Any ideas what could be wrong in my keycloak config ?

2
angularcorskeycloak

2 Answers

2
votes

I know this is an old question but given that I had the same issue and I found the fix, I'd like to share it here for the ages.

If you set the role account/viewProfile to your users like this the cors error will fade away.

I've opened a JIRA https://issues.redhat.com/browse/KEYCLOAK-18523 for this fyi

0
votes

Use the implicit flow for Keycloak instead of default authorization-code

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

and Access Type option to Public