Angular – KeyCloak : No ‘Access-Control-Allow-Origin’ header is present on the requested resource

angularauthenticationkeycloakkeycloak-servicesxmlhttprequest

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

Best Answer

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.

Related Solutions

Access-Control-Allow-Origin Multiple Origin Domains

Sounds like the recommended way to do it is to have your server read the Origin header from the client, compare that to the list of domains you would like to allow, and if it matches, echo the value of the Origin header back to the client as the Access-Control-Allow-Origin header in the response.

With .htaccess you can do it like this:

# ----------------------------------------------------------------------
# Allow loading of external fonts
# ----------------------------------------------------------------------
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    <IfModule mod_headers.c>
        SetEnvIf Origin "http(s)?://(www\.)?(google.com|staging.google.com|development.google.com|otherdomain.example|dev02.otherdomain.example)$" AccessControlAllowOrigin=$0
        Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
        Header merge Vary Origin
    </IfModule>
</FilesMatch>

Javascript – “Origin null is not allowed by Access-Control-Allow-Origin” error for request made by application running from a file:// URL

For the record, as far as I can tell, you had two problems:

You weren't passing a "jsonp" type specifier to your $.get, so it was using an ordinary XMLHttpRequest. However, your browser supported CORS (Cross-Origin Resource Sharing) to allow cross-domain XMLHttpRequest if the server OKed it. That's where the Access-Control-Allow-Origin header came in.
I believe you mentioned you were running it from a file:// URL. There are two ways for CORS headers to signal that a cross-domain XHR is OK. One is to send Access-Control-Allow-Origin: * (which, if you were reaching Flickr via $.get, they must have been doing) while the other was to echo back the contents of the Origin header. However, file:// URLs produce a null Origin which can't be authorized via echo-back.

The first was solved in a roundabout way by Darin's suggestion to use $.getJSON. It does a little magic to change the request type from its default of "json" to "jsonp" if it sees the substring callback=? in the URL.

That solved the second by no longer trying to perform a CORS request from a file:// URL.

To clarify for other people, here are the simple troubleshooting instructions:

If you're trying to use JSONP, make sure one of the following is the case:
- You're using $.get and set dataType to jsonp.
- You're using $.getJSON and included callback=? in the URL.
If you're trying to do a cross-domain XMLHttpRequest via CORS...
1. Make sure you're testing via http://. Scripts running via file:// have limited support for CORS.
2. Make sure the browser actually supports CORS. (Opera and Internet Explorer are late to the party)

Best Answer

Related Solutions

Access-Control-Allow-Origin Multiple Origin Domains

Javascript – “Origin null is not allowed by Access-Control-Allow-Origin” error for request made by application running from a file:// URL

Related Topic