I’ve added * to the Web Origins for my NodeJS Connect client as well as my NodeJS API client. I’ve also added enable-cors = true to my keycloak.json. Even with both of these, I still can’t redirect to Keycloak from my NodeJS API. Is there anything else I need to do to enable CORS?
1 Like
Do you use https requests?
If yes, then * is not valid Web Origin configuration. I recommend to specify all origins explicitly e.g. https://domain.com
No these are just http requests, am developing locally. I tried putting an explicit origin as well but that didn’t work either.
Could you provide curl example of the preflight request/response?
I can’t right at this moment, probably soon, but is there something in particular I should be watching out for in the preflight request/response?
Yes, you may have some special request headers, which need to be requested or may be not supported by keycloak. You may copy preflight request from the browser console.
Please use markdown code formatting in the future. It is not clear which url has a cors issue.
Same problem here:
Access to XMLHttpRequest at 'http://127.0.0.1:8080/auth/realms/sirixdb/protocol/openid-connect/auth?redirect_uri=http%3A%2F%2F127.0.0.1%3A3005%2Fcallback&state=7a22ed07-58d8-4fe2-8d1f-79117b160a9e&response_type=code&client_id=sirix' (redirected from 'https://127.0.0.1:9443/user/authorize') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I’m running Keycloak in a Docker Container. Do I have to enable CORS somewhere alltogether? Where? Is it possible with the Web-GUI?
“null” origin = you are firing request from file:// or you may have some redirect there.
Generic advices:
- do your development on nonlocalhost, non 127.0.0.1 origins (e.g. from your local IP) because some browsers may have a problem with that
- use browser console console and network tab to see what’s going on
- use different browsers, because they may provide more meaningful CORS error messages
Yes, it’s a redirect from the Vert.x based backend.
Workflow should be somehow like described here, I guess:
When a simple Button is clicked, axios makes a request to the Vert.x backend which says, hey, I’m redirecting you to Keycloak.
https://raw.githubusercontent.com/sirixdb/sirix-web-frontend/oauth2-auth/pages/login/index.vue
I have a config file from which the Vert.x Server reads the URL for Keycloak. I’m using docker-compose and I’ve now used the host network, because otherwise I couldn’t get it to work.
Firefox is currently not supported by the backend I guess, as I have no OPTIONS routes. So I’d love to get it to work with Chrome first.
Now I’ve changed the IP-address manually in several config files (from Nuxt.js and from Vert.x and in the axios call itself, as it didn’t work with the Nuxt.js config) and got Chrome to work with the self signed certificate again (or better: I disabled all checks)…
Access to XMLHttpRequest at 'http://192.168.178.44:8080/auth/realms/sirixdb/protocol/openid-connect/auth?redirect_uri=http%3A%2F%2F192.168.178.44%3A3005%2Fcallback&state=ee206dc8-6299-4715-b060-2aa3f7837928&response_type=code&client_id=sirix' (redirected from 'https://192.168.178.44:9443/user/authorize') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
But still, Keycloak isn’t sending the “Access-Control-Allow-Origin” header and I have no clue how to set the Origin on a redirect in Chrome, too 
And that should really be the simplest thing, a redirect to the Keycloak login page
Exchanging the code and storing the auth token and stuff like that will be next. I can only hope that I get this:
to work then…
It looks like you doing AJAX call .$get("/user/authorize", {}) and then AJAX call is redirected, not a browser. Why you just don’t redirect whole browser to /user/authorize, e.g. vanilla JS (or simple old school html link /user/authorize):
window.open("/user/authorize", "_self")
Then backend redirect browser to Keycloak login page nicely and your won’t have any CORS issue. But I really don’t understand your app, so maybe I’m deeply wrong.
Great tips. I haven’t yet tried updating to use nonlocalhost origins, but the simple approach of redirecting the entire browser to an api endpoint that is protected by keycloak, which then redirects us to keycloak itself, works. Thanks for the suggestions!
Yes, for me too, I guess… I’m super new to the frontend stuff, so thanks a lot. Now I need to integrate this plugin, which extracts the code on the callback URL, makes a request to the token endpoint and gets the JWT token and hopefully sends it with each request 
Same problem with react js. (used keycloak-js)
Access to XMLHttpRequest at ‘https://{auth_server_ip}:8443/auth/realms/{clientId}/protocol/openid-connect/token’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Client Access Type: confidential
Valid Redirect URIs: http ://localhost:3000/*
Web Origins: http ://localhost:3000
Other URLs are empty. (sorry for space this comment not allows me to put more than 2 urls)
If I change access type to public then keycloak works normally. But with secret it throws cors error.
keycloak standalone log:
2020-06-17 19:07:31,373 WARN [org.keycloak.events] (default task-237) type=CODE_TO_TOKEN_ERROR, realmId={realmId}, clientId={clientId}, userId=null, ipAddress={my_pc_ip}, error=invalid_client_credentials, grant_type=authorization_code
Same problem with keycloak js.
My keycloak server is 10.0.0
have u fix the problem, i face the same bugs
Hi Everyone,
Same problem since two days with that. If someone want some details on how to reproduce, just ask.
I’m using, Keycloak 11.0.3 on localhost:8080 with Javascript Adapter and a node server in localhost:3000.
Happy if someone have a solution.
I’ve tried to see exchange with Wireshark. Seems that Keycloak doesn’t send Acces-Controll-Allow-Origins.
Regards