KeyCloak : No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I'm using Angular 8.0.3 and keycloak 6.0.1 to make the front authentication.

Problem

I managed to get to the keycloak login page from my application. After logging in with my login details, an error occurs :
-localhost/:1 Access to XMLHttpRequest at 'https://localhost:8080/auth/realms/pwe-realm/protocol/openid-connect/token' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
-Keycloak init failed An error happened during Keycloak initialization.

Could you help me please ?

My Keycloak Configuration :

1 Realm : pwe-realm
2 client :
-pwe-api (for my back end)
-pwe-web (for my authentication front end)

pwe-web configuration:
Client Protocol: openid-connect
Access Type: public
Valid redicrect Uris: http//:localhost:4200/ (I tried also "*")

My code (I am using this librairy : keycloak-angular):

environments.ts :

import {KeycloakConfig} from 'keycloak-angular';

const keycloakConfig: KeycloakConfig = {
  url: 'https://localhost:8080/auth',
  realm: 'pwe-realm',
  clientId: 'pwe-web'
};

export const environment = {
  production: false,
  keycloakConfig
};

app.moudle.ts

//imports

const keycloakService = new KeycloakService();

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    KeycloakAngularModule,
    BrowserModule,
    AppRoutingModule,
    ...
  ],
  providers: [
    {
      provide: KeycloakService,
      useValue: keycloakService,
    }
  ],
  entryComponents: [AppComponent]
})
export class AppModule implements DoBootstrap {
  async ngDoBootstrap(app) {
    const { keycloakConfig } = environment;

    try {
      await keycloakService.init({ config: keycloakConfig });
      app.bootstrap(AppComponent);
    } catch (error) {
      console.error('Keycloak init failed', error);
    }
  }
}

Robin Robin · Accepted Answer · 2019-11-27T14:27:09

I wasted half a day on this while developing with Vue.js against a server on localhost.

You probably need to set the Web Origins on your Keycloak server for your Keycloak client:

Login to the Keycloak admin screen, select the realm pwe-realm and then your client pwe-web.
Scroll to the Web Origin settings and type the plus sign. Do not click on the (+) button, but literally type + . That adds all the Valid Redirect URIs that you defined above to the Web Origins headers. You will also need to add the URI of your angular application to the Valid Redirect URIs list.
Press Save at the bottom of the screen.

It should work immediately.

KeyCloak : No 'Access-Control-Allow-Origin' header is present on the requested resource

3 Answers