How to fix a CORS error?

[DP]

Hello!

I have a Vue-based application which runs on XXX.XXX.XXX.XXX:80. It uses Keycloak authentication. The Keycloak frontent runs on XXX.XXX.XXX.XXX:8103.

After a successful login in Keycloak I am getting the error

Access to XMLHttpRequest at 'http://XXX.XXX.XXX.XXX:8103/realms/MyRealm/protocol/openid-connect/token' from origin 'http://XXX.XXX.XXX.XXX' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

in the Vue-based application.

I suppose the problem is that on the Vue side I am not sending the 'Access-Control-Allow-Origin' header when making a request to Keycloak.

Here is how I initialize Keycloak client in Vue:

let initOptions = {
    url: process.env.VUE_APP_KEYCLOAK_URL,
    realm: process.env.VUE_APP_KEYCLOAK_REALM,
    clientId: process.env.VUE_APP_KEYCLOAK_CLIENT_ID,
    onLoad:'login-required' }

export let keycloak = Keycloak(initOptions);

console.log("keycloak: " + keycloak);

Vue.prototype.$keycloak = keycloak.init({ onLoad: initOptions.onLoad, checkLoginIframe: false


}).success((auth) =>{
    // Successful authentication in Keycloak
});

VUE_APP_KEYCLOAK_URL is defined in .env file as

VUE_APP_KEYCLOAK_URL=http://XXX.XXX.XXX.XXX:8103/

How do I need to change my code in order to be able to operate the Vue application at http://XXX.XXX.XXX.XXX and Keycloak at http://XXX.XXX.XXX.XXX:8103?

Thanks in advance

[Mark Watson]

Access-Control-Allow-Origin is actually a response header. I'd take a look at your Keycloak realm configuration, make sure the realm client is configured to accept requests from the origin you're sending.

Screenshot from 16.1.1 but I imagine it's similar in other versions:

We use '+' to include the domains specified in our 'Valid Redirect URIs' configuration.

Hope that helps!

--
You received this message because you are subscribed to the Google Groups "Keycloak User" group.
To unsubscribe from this group and stop receiving emails from it, send an email to keycloak-use...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/keycloak-user/2c87f6f8-b85e-4e31-916b-ff2005888058n%40googlegroups.com.

[Dmitrii Pisarenko]

Thanks!

 

From: Mark Watson <mjw4...@gmail.com>
Date: Tuesday, 17. January 2023 at 20:05
To: Dmitrii Pisarenko <d.pis...@ifrbanking.ru>
Cc: Keycloak User <keyclo...@googlegroups.com>
Subject: Re: [keycloak-user] How to fix a CORS error?

Access-Control-Allow-Origin is actually a response header. I'd take a look at your Keycloak realm configuration, make sure the realm client is configured to accept requests from the origin you're sending.

 

Screenshot from 16.1.1 but I imagine it's similar in other versions: