Keycloak-angular: Access to keycloak from origin http://localhost:4200 has been blocked by CORS policy

[IsaacHub]

"keycloak-angular": "^7.3.1",
"keycloak-js": "^10.0.2",
"@angular/core": "~9.1.11",

After ng serve, it takes to login page and after login it redirects to localhost:4200 with a blank page and gives the following error:

Access to XMLHttpRequest at 'https://keycloak41-dev.mydomain.com/auth/realms/myrealm/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.

The above error occurs only in angular9
I'm upgrading my angular7 project to angular9

With angular7 and keycloak-angular6, the same realm has no problems. It is working fine with the following combination:
keycloak-angular : 6.1.0
@angular/core: 7.1.4

No config has been changed in keycloak admin.
This error occurs only with angular9 and keycloak-angular7 combination.

_My questions:_

What should I need to do to get rid of cors error?
Can I clear realm cache and user cache in keycloak admin, if so, is it safe to clear the cache?

Here is the code for both angular7 and angular9 projects, both projects has the same http://localhost:4200 url, but only angular9 gives the error.

keycloak.init({
    config: {
        realm: _REALM,
        url: _URL,
        clientId: _CLIENT_ID,
    },
    initOptions: {
        onLoad: 'login-required',
        checkLoginIframe: false
    },
    enableBearerInterceptor: true,
    bearerExcludedUrls: ['/assets', '/clients/public']
})

[IsaacHub]

I have changed the Access Type from Confidential to Public and it worked.
I want this to work with access type confidential as well.

[michelmeeuwissen]

Same problem with Angular 10 and access type is already on public but still getting the cors message.

[parikmaan]

Hope you have configured 'Web Origins' in your client.

[IsaacHub]

Recent version of keycloak-js has removed the confidential option. This is the reason we get CORS error, and of course this error is misleading and not useful. It should've been something like "_Access type: confidential has been removed in latest version, please use 'Public'_"

Here is the PR for removal of confidential option:
https://github.com/keycloak/keycloak/pull/6454

The reason is the client secret is available in Javascript, so anyone can view it and it doesn't make any sense in terms of security, so they ditched confidential and kept Public since both literally has no difference, and no need for the client secret in the Javascript code anymore.

[jonkoops]

Closing this issue as it seems to be resolved

[Rebaiahmed]

Hi I have the same issue and I didn't" get how to resolve it
"keycloak-angular": "^7.3.1",
"keycloak-js": "^10.0.2",
"Angular version" ! 9

[IsaacHub]

@Rebaiahmed Open your keycloak server realm console you are using, and click clients and choose the client you are using, and in the settings tab you will find Access type, you have to set it to Public and hit save.

[WilmerQ]

@IsaacHub thanks, it worked for me.

[DamjanJ]

For what it's worth, we did manage to use confidential by using an older version of keycloak-angular:

"@angular/core": "9.1.7",
"keycloak-angular": "^6.1.0"

keycloak server version is: 9.0.0

Again, our issue was not how the secret was handled but that by switching to 'public' we lost out on all of the big Authorization keycloak features - resource, scope, policy and permission management.
But with this rollback, it seems to work. Something to consider if you need Authorization features (thus 'confidential' enabled)

[danielehrhardt]

Did someone found a Solution here?
I mean set the Server to Public is not really a Secure Solution??

[jonkoops]

I mean set the Server to Public is not really a Secure Solution??

It's the only option for a client side application. Storing the information of other flows is even less secure and no longer supported by Keycloak JS. Read the comments in this thread for more information.