# CORS with keycloak and VueJs **URL:** \ **Category:** Miscellanaeous\ **Created:** [February 14, 2021, 4:06pm UTC](https://forum.keycloak.org/t/cors-with-keycloak-and-vuejs/7375 "2021-02-14T16:06:35Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![viko](https://avatars.discourse-cdn.com/v4/letter/v/aeb1de/32.png) [@viko](https://forum.keycloak.org/u/viko)\ **Post date:** [February 14, 2021, 4:06pm UTC](https://forum.keycloak.org/t/cors-with-keycloak-and-vuejs/7375/1 "2021-02-14T16:06:35Z")
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… ![keycloak](https://global.discourse-cdn.com/free1/uploads/keycloak/original/2X/5/5f264b2a8f3828301bcd855b14a4aad0c89e32fe.png) _P.S.: In keycloak config, in Valid Redirect URI, I tried with: [http://192.168.0.100:8080/](http://192.168.0.100:8080/)_, [http://192.168.0.100/](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! ---
**Author:** ![jangaraj](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/jangaraj/32/5175_2.png) [@jangaraj](https://forum.keycloak.org/u/jangaraj)\ **Post date:** [February 14, 2021, 9:08pm UTC](https://forum.keycloak.org/t/cors-with-keycloak-and-vuejs/7375/2 "2021-02-14T21:08:03Z")
**1st rule:** SPA (Vue, React, Angular) = Grant code flow with PKCE, so used lib must be properly configured to use this flow: ![image](https://global.discourse-cdn.com/free1/uploads/keycloak/original/2X/e/ea0b2941931174f9238456ece8b2ef15b84ef5d6.png) **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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers) > In requests with credentials, it is treated as the literal header name " `*` " without special semantics. Note that the [`Authorization`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/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 ‘\*’). ---
**Author:** ![dasniko](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/dasniko/32/2969_2.png) [@dasniko](https://forum.keycloak.org/u/dasniko)\ **Post date:** [February 14, 2021, 9:16pm UTC](https://forum.keycloak.org/t/cors-with-keycloak-and-vuejs/7375/3 "2021-02-14T21:16:36Z")
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? 🤔 ---
**Author:** ![jangaraj](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/jangaraj/32/5175_2.png) [@jangaraj](https://forum.keycloak.org/u/jangaraj)\ **Post date:** [February 14, 2021, 9:49pm UTC](https://forum.keycloak.org/t/cors-with-keycloak-and-vuejs/7375/4 "2021-02-14T21:49:26Z")
> [@dasniko](#): > > Update tokens with a `setInterval()` ? Really? Yeah, old school vanilla JS. Is there any better approach (which can be included in [https://www.keycloak.org/securing-apps/vue](https://www.keycloak.org/securing-apps/vue))? ---
**Author:** ![viko](https://avatars.discourse-cdn.com/v4/letter/v/aeb1de/32.png) [@viko](https://forum.keycloak.org/u/viko)\ **Post date:** [February 15, 2021, 2:08am UTC](https://forum.keycloak.org/t/cors-with-keycloak-and-vuejs/7375/5 "2021-02-15T02:08:23Z")
Thank you, but like you can see, I did the 1st case like [Keycloak - Guide - Vue.js](https://www.keycloak.org/securing-apps/vue). 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… ---
**Author:** ![jangaraj](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/jangaraj/32/5175_2.png) [@jangaraj](https://forum.keycloak.org/u/jangaraj)\ **Post date:** [February 15, 2021, 2:51am UTC](https://forum.keycloak.org/t/cors-with-keycloak-and-vuejs/7375/6 "2021-02-15T02:51:59Z")
The guide [Keycloak - Guide - Vue.js](https://www.keycloak.org/securing-apps/vue) 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](https://github.com/keycloak/keycloak-web/blob/master/guides/securing-apps/vue.adoc) ---
**Author:** ![dasniko](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/dasniko/32/2969_2.png) [@dasniko](https://forum.keycloak.org/u/dasniko)\ **Post date:** [February 15, 2021, 6:42am UTC](https://forum.keycloak.org/t/cors-with-keycloak-and-vuejs/7375/7 "2021-02-15T06:42:36Z")
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](https://github.com/axios/axios) there is a request interceptor where you can update the token (like in my [example here](https://github.com/dasniko/keycloak-reactjs-demo/blob/master/src/services/HttpService.js#L13) and mentioned in my [youtube video](https://youtu.be/q50LxyGtEf0). If one uses good hold `xhr` requests or the `window.fetch` API, you’ll have to overwrite the the global function, like [here](https://stackoverflow.com/questions/45425169/intercept-fetch-api-requests-and-responses-in-javascript) and [here](https://stackoverflow.com/questions/42578452/can-one-use-the-fetch-api-as-a-request-interceptor). 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… ---
**Author:** ![viko](https://avatars.discourse-cdn.com/v4/letter/v/aeb1de/32.png) [@viko](https://forum.keycloak.org/u/viko)\ **Post date:** [February 15, 2021, 11:26pm UTC](https://forum.keycloak.org/t/cors-with-keycloak-and-vuejs/7375/8 "2021-02-15T23:26:03Z")
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), [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. ---
**Author:** ![jangaraj](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/jangaraj/32/5175_2.png) [@jangaraj](https://forum.keycloak.org/u/jangaraj)\ **Post date:** [February 16, 2021, 6:52am UTC](https://forum.keycloak.org/t/cors-with-keycloak-and-vuejs/7375/9 "2021-02-16T06:52:23Z")
> [@viko](#): > > Doesn’t work Please provide [Minimal reproducible example - Wikipedia](https://en.m.wikipedia.org/wiki/Minimal_working_example) always otherwise nobody will be able to help you and my answer will be “it works on my computer”. ---
**Author:** ![viko](https://avatars.discourse-cdn.com/v4/letter/v/aeb1de/32.png) [@viko](https://forum.keycloak.org/u/viko)\ **Post date:** [February 16, 2021, 6:14pm UTC](https://forum.keycloak.org/t/cors-with-keycloak-and-vuejs/7375/10 "2021-02-16T18:14:11Z")
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](http://192.168.0.40:8080/auth))) ---
**Author:** ![viko](https://avatars.discourse-cdn.com/v4/letter/v/aeb1de/32.png) [@viko](https://forum.keycloak.org/u/viko)\ **Post date:** [February 17, 2021, 2:13am UTC](https://forum.keycloak.org/t/cors-with-keycloak-and-vuejs/7375/11 "2021-02-17T02:13:29Z")
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. ---
**Author:** ![mlleal](https://avatars.discourse-cdn.com/v4/letter/m/e495f1/32.png) [@mlleal](https://forum.keycloak.org/u/mlleal)\ **Post date:** [March 5, 2021, 8:22pm UTC](https://forum.keycloak.org/t/cors-with-keycloak-and-vuejs/7375/12 "2021-03-05T20:22:43Z")
Could you give me more details ?? thanks ---
**Author:** ![viko](https://avatars.discourse-cdn.com/v4/letter/v/aeb1de/32.png) [@viko](https://forum.keycloak.org/u/viko)\ **Post date:** [March 5, 2021, 8:41pm UTC](https://forum.keycloak.org/t/cors-with-keycloak-and-vuejs/7375/13 "2021-03-05T20:41:06Z")
mlleal, in my realm, into clients → settings, my Access Type was Private, sou i changed to Public, and it was enough.