Angular Keycloak integration CORS Error: CORS header ‘Access-Control-Allow-Origin’ missing

I'm trying to consume the OAuth2.0 api from keycloak using angular:

login() {
const url = 'https://keycloakHost/auth/realms/my-realm/protocol/openid-connect/token';

const headers = new HttpHeaders({
'Content-Type': 'application/x-www-form-urlencoded',
});

const body = new HttpParams()
.set('grant_type', 'password')
.set('client_id', 'client')
.set('username', 'username')
.set('password', 'password');

this.http.post(url, body.toString(), { headers })
.subscribe({
next: (response) => {
console.log('Token response:', response);
},
error: (error) => {
console.error('Error fetching token:', error);
}
});
}


I set the web origin in keycloak to "*" as mentioned in help toggle:

but i always get the error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://keycloakHost/auth/realms/my-realm/protocol/openid-connect/token. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

P.S: angular version 19.2.9 and keycloak version:26
​

Continue reading...