Keycloak CORS issue with Angular App

I am running an Angular v10 SPA and am trying to get access to the https://localhost:8443/auth/realms/{realm}/protocol/openid-connect/token but it’s not working. I currently have keycloak setup with a simple realm, the client is set to be confidential, webOrigins: https://localhost:4200, Browser Flow: browser, Direct Grant Flow: direct_grant, added webOrigins: + and *.
Currently, nothing is working to get CORS to accept an authentication request from the Angular application.

Can you post the error message? Did you tried Valid Redirect URIs: * and Web Origins: * for test purpose?

No, but i can try that

That doesn’t work either. Error from angular app is …
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:8443/auth/realms/{realm}/protocol/openid-connect/token. (Reason: CORS request did not succeed).

If you have an Angular PWA then you should use Keycloak’s Standard Flow (Keycloak’s name for the OpenID Connect Authorization Code Flow) and your Access Type should be public.

See: Getting started with Keycloak