CORS with keycloak and VueJs

Hi! I read a lot of forums searching about this and I found a lot of problems solved but no one is equal mine.
I worked in a project at my work with keycloak and vuejs and it works fine, but now, inside my network, this is a problem. My scenary: One server with keycloak (192.168.0.40:8080) frontend and backend are been developed in (192.168.0.100 - backend port 3335, frontend: 8080). I have a backend in nodejs that worked in tests (insomnia), getting token, testing routes… But the problem is between keycloak x vuejs (without passing by backend yet). At website of keycloak, has a test for vue (without backend), in this test I am having so many problems. In my realm of keycloak, the web origins is open for everybody (*), because I tested with a lot os possibilities. In pictures you can see…

P.S.: In keycloak config, in Valid Redirect URI, I tried with: http://192.168.0.100:8080/, http://192.168.0.100/* (a lot of possibilities too), and web origins too, including (+).

I don’t know what can I do… Thank you!

1st rule:
SPA (Vue, React, Angular) = Grant code flow with PKCE, so used lib must be properly configured to use this flow:

2nd rule:
set weborigins explicitly always, so in your case http://192.168.0.100:8080.

the web origins is open for everybody (*)

I guess you didn’t read spec: Access-Control-Allow-Headers - HTTP | MDN

In requests with credentials, it is treated as the literal header name " * " without special semantics. Note that the Authorization header can’t be wildcarded and always needs to be listed explicitly.

So don’t rely on any magic wildchars and specify weborigins explicitly (although typical stackoverflow advice is to set it to ‘*’).

1 Like

In current versions of keycloak-js the default promise type is already native, no more need to specify it.

Update tokens with a setInterval()? Really? :thinking:

1 Like

Yeah, old school vanilla JS. Is there any better approach (which can be included in https://www.keycloak.org/securing-apps/vue)?

Thank you, but like you can see, I did the 1st case like Keycloak - Guide - Vue.js. 2nd case, I put a P.S. (in original post) that I tried with the origin ip and port (I know that * opens for everybody) but this is my home network, so this is not a problem. But thanks for your answer…

The guide Keycloak - Guide - Vue.js is not the best one. I think there was request on keyclok-dev mailing list for guide review. So it is a good time to test my suggestions and then you can create PR to update and fix that doc keycloak-web/vue.adoc at master · keycloak/keycloak-web · GitHub

Ok, this gets offtopic for this thread, but anyway…
I think there’s no “general” advice as it depends on the method/lib/api how you do backend http requests.

In case of axios there is a request interceptor where you can update the token (like in my example here and mentioned in my youtube video.

If one uses good hold xhr requests or the window.fetch API, you’ll have to overwrite the the global function, like here and here.

And all this stuff doesn’t belong to only Vue.js, also React and any other environment where you can choose how to do HTTP calls. Unfortunately I’m not experienced in Angular. How do I do it there?
Perhaps I should do a blog post and a short video about it. Let’s see…

1 Like

Doesn’t work @jangaraj ! My problem is CORS, I tried a lot of combinations in web-origin at keycloak config like *, or just +, or http://192.168.0.100:8080, http://192.168.0.100:8080/, including more than 1 together… I don’t know why it’s happening.

Please provide Minimal reproducible example - Wikipedia always otherwise nobody will be able to help you and my answer will be “it works on my computer”.

Doesn’t worked with your example, like you said in your 1st post here… I don’t know why, but the problem is in configuration between keycloak and front-end (I don’t know where or why), but like I said, in tests passing by backend, it worked. But I don’t know if exists a method like send me to /auth page of keycloak with realm and clientid, forwarded by frontend passing by backend… (I don’t know if was a little confuse, sorry).

Edit: I tried with res.redirect, but only goes to the admin page of keycloak, without realm (ex: res.redirect(http://192.168.0.40:8080/auth))

Thank you guys! After almost 1 week trying, I got it. Inside my client (following a tutorial, I used Access type: Private), and with this, ALL THE TIME return CORS (including a test with new config at localhost keycloak). So, I tried put it in public mode, and it works. Thank you for your help.

Could you give me more details ??
thanks

mlleal, in my realm, into clients → settings, my Access Type was Private, sou i changed to Public, and it was enough.