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

Solution 1

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:

1. Login to the Keycloak admin screen, select the realm pwe-realm and then your client pwe-web.
2. 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.
3. Press Save at the bottom of the screen.

It should work immediately.

Solution 2

I agree, that you need to configure Web Origins, but:

• wildcard * won’t work with authenticated requests, so configure them explicitly

• some browsers may not support CORS for localhost (Deadly CORS when http://localhost is the origin), so don't use localhost for development

Solution 3

For CORS related issue you have to set Web Origins What is the use of web-origion ,below is the official document

Web Origins

This option centers around CORS which stands for Cross-Origin Resource Sharing. If browser JavaScript tries to make an AJAX HTTP request to a server whose domain is different from the one the JavaScript code came from, then the request must use CORS. The server must handle CORS requests in a special way, otherwise the browser will not display or allow the request to be processed. This protocol exists to protect against XSS, CSRF and other JavaScript-based attacks.

Keycloak has support for validated CORS requests. The way it works is that the domains listed in the Web Origins setting for the client are embedded within the access token sent to the client application. The client application can then use this information to decide whether or not to allow a CORS request to be invoked on it. This is an extension to the OIDC protocol so only Keycloak client adapters support this feature. See Securing Applications and Services Guide for more information.

To fill in the Web Origins data, enter in a base URL and click the + sign to add. Click the - sign next to URLs you want to remove. Remember that you still have to click the Save button!

So in your client set 'Web Origins' (or just add * ).