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

"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.

[alpha-mo]

Closing this issue as it seems to be resolved

how does it seem to be solved??