Angular with keycloak integration gives CORS error for password grant_type

Question

I am trying to integrate keycloak with my angular web application with grant_type "PASSWORD" using my custom login form to get username and password.

I have added my client under realm settings in keycloak and enabled Standard, implicit, direct access grant and service accounts options.

Configured my Valid Redirect URL as : http://localhost:4200/* Base URL : http://localhost:4200 And web origins with + ( tried with * as well)

Also, added user and updated password.

With postman/insomnia, I am able to consume keycloak rest API and get access, refresh and id tokens for grant_type "password" URL: http://localhost:8080/realms/typing-office/protocol/openid-connect/token Method: Post Headers: Content_type : application/x-www-form-urlencoded Form URL encoded as below: grant_type: password scope: openid client_secret: MY_CLIENT_SECRET_RETRIEVED_FROM_KEYCLOAK client_id: MY_CLIENT_ID username: TEST_USER password: TEST_PWD

It works fine with postman/insomnia. However, it fails while trying to integrate with angular.

Getting CORS error as shown below: Preflight request is successful with 200 response as shown below enter image description here Actual request fails with Referrer policy: strict-origin-when-cross-origin enter image description here

I tried with angular proxy as well however still it doesn't work. Any idea what could be an issue? Key cloak server version: 17.0.1

Any working of angular integration with keycloak for "password" grant_type?