I have integrated keycloak with our application. I need to make post call to keycloak in angular 7 but it throws CORS policy error. OPTIONS request does not have any problem but the actual post request will get CORS error. When I write same post call in java script works fine.
Angular 7 code:
-----------------
getResources() {
const url = 'http://localhost:8080/auth/realms/Test_Anusha/protocol/openid-connect/token';
const token = this.keycloakService.getKeycloakInstance().token;
const httpOptions = {
headers: new HttpHeaders()
.append('Content-Type', 'application/x-www-form-urlencoded')
.append('Authorization', 'bearer ' + token)
.append('Access-Control-Allow-Origin', '*')
.append('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
};
const payload = {
'grant_type': 'urn:ietf:params:oauth:grant-type:uma-ticket',
'response_mode': 'permissions',
'audience': 'enliven-gui',
'permission': 'EIS'
};
try {
console.log(url);
console.log(JSON.stringify(payload));
console.log(JSON.stringify(httpOptions));
return this.http.post(url, JSON.stringify(payload), httpOptions).subscribe(res => {
console.log('res', res);
}, (err) => {
console.log(err);
}
);
} catch {
console.log('error');
}
}
Java script code:
-------------------
getResources(tokenEndpint, token, clientId, resources) {
token = this.keycloakService.getKeycloakInstance().token;
const request = new XMLHttpRequest();
request.open('POST', tokenEndpint, false);
request.setRequestHeader('Authorization', 'Bearer ' + token);
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
let response;
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status >= 200 && request.status < 300) {
response = JSON.parse(request.responseText);
} else if (request.status === 403) {
console.log('Authorization request was denied by the server.');
return null;
} else {
console.log('Could not obtain authorization data from server.');
return null;
}
}
};
this.params = 'grant_type=urn:ietf:params:oauth:grant-type:uma-ticket&response_mode=permissions&audience=' + clientId;
if (Array.isArray(resources)) {
for (let i = 0; i < resources.length; i++) {
this.params = this.params + '&permission=' + resources[i];
}
}
request.send(this.params);
return response;
}
With java script code works fine but not with angular 7 code. I am not able to find what is the problem.Any help is appreciate.