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);
}
}
}
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:
It should work immediately.