0

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.

AshTyson
  • 473
  • 7
  • 23
Anusha M
  • 19
  • 4
  • 2
    open console & check the error – brk Mar 12 '19 at 13:40
  • Possible duplicate of [Keycloak angular No 'Access-Control-Allow-Origin' header is present](https://stackoverflow.com/questions/45051923/keycloak-angular-no-access-control-allow-origin-header-is-present) – AshTyson Mar 12 '19 at 13:42
  • There are alot of questions related to CORS and a few more that is related to Keycloak. Please check https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS on how cors work. You might need access to the server which sets the access control header. – AshTyson Mar 12 '19 at 13:44
  • @sammy I have checked the links which you shared before I posted the question.But the problem is we don't have access to keycloak server side code to enable CORS policy. – Anusha M Mar 13 '19 at 05:35

0 Answers0