Keycloak angular No 'Access-Control-Allow-Origin' header is present

I was fighting with KeyCloak and CORS and all of this for about two weeks, and this is my solution (for keycloak 3.2.1):

Its all about configuring KeyCloak server. It seems to be, that WebOrigin of your Realm needs to be

*

Only one origin "*".

Thats all, what was needed for me.

If you enter your server as WebOrigin, the trouble begins. When you call keycloak.init in JavaScript, keycloak does not generate CORS headers, so you have to configure them manually, and as soon as you do so, and call keycloak.getUserInfo after successful init - you get double CORS headers, which is not allowed.

Somewhere deep inside of keycloak mailing lists is stated, that you need to set enable-cors=true in your keycloak.json, but there is nothing about that on keycloak.gitbooks.io. So it seems not to be true.

They also don't mention CORS when describing JavaScript and Node.Js adapters, and I don't know why, seems not to be important at all.

It also seems to be, that you should not touch WildFly configuration to provide CORS headers.

Besides, CORS in OIDC is a special KeyCloak feature (and not a bug).

Hopefully this answer serves you well.

It's important to note that setting your web origin to "*" opens a gaping security hole. It allows any script from any domain to make requests on behalf of a user, within that user's browser.

Whenever you find yourself disabling a security feature in a way like this, you need to consider why the security feature exists.

See "Web Origins" in 8.1.1 of the Keycloak docs

The solution that worked for me was setting the Web Origins URL (Of my Client, not the Realm) from for example: http://localhost:3000/ to http://localhost:3000 (Notice the lack of / at the end). This way you are not opening it to all URLS by using *.

I had the same issue and (at least) for Keycloak Server Version 8.0.1 you can add a '+' as input of the 'Web Origins' field, which seems to be the best choice.

The '+' effect should be the same as adding (see screenshot below) 'http://localhost:4200' as 'Web Origins' entry.

This is what the 'Web Origins' field tooltip is saying:

"Allowed CORS origins. To permit all origins of "Valid Redirect URIs", add '+'. To permit all origins, add '*'." (see screenshot below)