title: KeyCloak : No 'Access-Control-Allow-Origin' header is present on the requested resource
body: <p>I'm using Angular 8.0.3 and keycloak 6.0.1 to make the front authentication.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>I managed to get to the keycloak login page from my application. After logging in with my login details, an error occurs :
  <br>-localhost/:1 Access to XMLHttpRequest at '<a href="https://localhost:8080/auth/realms/pwe-realm/protocol/openid-connect/token" rel="noreferrer">https://localhost:8080/auth/realms/pwe-realm/protocol/openid-connect/token</a>' from origin '<a href="http://localhost:4200" rel="noreferrer">http://localhost:4200</a>' has been blocked by CORS policy: <strong>No 'Access-Control-Allow-Origin' header is present on the requested resource.</strong>
  <br>-Keycloak init failed An error happened during Keycloak initialization.</p>
  
  <p>Could you help me please ?</p>
  
  <p><strong>My Keycloak Configuration :</strong></p>
  
  <p>1 Realm : pwe-realm
  <br>2 client :
  <br>-pwe-api (for my back end)
  <br>-pwe-web (for my authentication front end)</p>
  
  <p>pwe-web configuration:
  <br>Client Protocol: openid-connect
  <br>Access Type: public
  <br>Valid redicrect Uris: http//:localhost:4200/ (I tried also "*")</p>
  
  <p><strong>My code (I am using this librairy : <a href="https://github.com/mauriciovigolo/keycloak-angular" rel="noreferrer">keycloak-angular</a>):</strong></p>
  
  <p>environments.ts :</p>
  
  <pre><code>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
  };
  </code></pre>
  
  <p>app.moudle.ts</p>
  
  <pre><code>//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);
      }
    }
  }
  </code></pre>