CORS issues with Javascript client

Securing applications
1

Hey there! I’ve been struggling with this issue for a while. I’ve tried many different solutions that I’ve read here and at StackOverflow, but nothing seems to help.

I have a EmberJS application running locally and I’m trying to authenticate my users using the Keycloak REST API like this:

 async authenticate(matricula, password) {
        const body = {
            "grant_type": "password",
            "client_id": keycloakConfig[this.envForKeycloak()].clientId,
            "username": matricula,
            "password": password
        };
        const response = await fetch(keycloakConfig[this.envForKeycloak()].token_url, {
            method: "POST",
            "headers": {
                Accept: "application/json",
                "Content-Type": "application/x-www-form-urlencoded",
            },
            body,
        });
        const data = await response.json();
    }

But I’m always getting this error:

Access to XMLHttpRequest at 'https://sso.apps.tjdft.jus.br/auth/realms/SUDES/protocol/openid-connect/token' from origin 'http://127.0.0.1:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
POST https://sso.apps.tjdft.jus.br/auth/realms/SUDES/protocol/openid-connect/token net::ERR_FAILED

This is my client configuration:

Selection_176
Selection_1761044×961 61.7 KB

I’ve trying a lot of things to get this working but nothing seems to help. Keycloak server version is 11.0.2.

Does somebody have a clue about it?
Thanks in advance!

2

My guess: client must be private (not public) and you have to client secret then

3

I have tried this:

async authenticate(matricula, password) {
        const body = {
            "grant_type": "password",
            "client_id": keycloakConfig[this.envForKeycloak()].clientId,
            "client_secret": keycloakConfig[this.envForKeycloak()].credentials.secret,
            "username": matricula,
            "password": password
        };
        debugger;
        const response = await fetch(keycloakConfig[this.envForKeycloak()].token_url, {
            method: "POST",
            "headers": {
                Accept: "application/json",
                "Content-Type": "application/x-www-form-urlencoded",
            },
            body,
        });
        const data = await response.json();
    }

And this:

async authenticate(matricula, password) {
        const body = {
            "grant_type": "client_credentials",
            "client_id": keycloakConfig[this.envForKeycloak()].clientId,
            "client_secret": keycloakConfig[this.envForKeycloak()].credentials.secret,
            "username": matricula,
            "password": password
        };
        debugger;
        const response = await fetch(keycloakConfig[this.envForKeycloak()].token_url, {
            method: "POST",
            "headers": {
                Accept: "application/json",
                "Content-Type": "application/x-www-form-urlencoded",
            },
            body,
        });
        const data = await response.json();
    }

Configuring the client like this:

Selection_178
Selection_1781049×962 62.6 KB

And I’m still getting the same CORS error. :cold_sweat:

When I try using Postman it works just fine! The problem is when I’m using my Javascript client.

4

And this is the realm settings:

Selection_179
Selection_1791032×465 43.1 KB

5
6

Thanks for the link!
But unfortunately nothing seems to work. :cry:

7

This is exactly the most usefulness problem description. Please provide, details, codes: how exactly preflight request looks like, … Otherewise answer for this type or problem description will be: I don’t know. I mention that in the repo:

always mention how did you configure client and how did you debug the issue (preflight request can be very usefull to see what is requested and what is returned by Keycloak). Requests I have CORS issue, so what to do are useless. Provides details and then you will increase your chance that someone gives you some clue.