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
Same problem with 12.0.4!
I’m also not able to set up CORS requests to function correctly using 12.0.4 here on our local installation and being searching quite a while now not finding any clear documentaiton or hints… Any help would be very appreciated…
1 Like
It appears the configured web origins for the client are ignored in the token response from the keycloak server. Perhaps it’s been hardcoded with “*”.
I’ve also been battling this for days,
version: 12.0.4
kubernetes: yes
ingress controller: yes
tls certs installed: yes
Client Access Type: public
@apellizzn
This is what i just did that sort of works.
Read this conversation for more details
My setup:
- a kubernetes cluster which would apply to any container e.g. docker.
- an ingress controller e.g. nginx
As this is a CORS issue, the solution that works so far:
I added an annotation to the keycloak ingress resource (rule); and to any other service or front end with an ingress resource. as low.
NOTE: the *yourdomain part needs to be replaced with your own domain.
nginx.ingress.kubernetes.io/configuration-snippet: |
if ($http_origin ~ '^https:\/\/(.*\.)?yourdomain\.(com|net)$') {
set $allow_origin $http_origin;
}
# Cors Preflight methods needs additional options and different Return Code
if ($request_method = 'OPTIONS') {
more_set_headers 'Access-Control-Allow-Origin: $allow_origin';
more_set_headers 'Access-Control-Allow-Credentials: true';
more_set_headers 'Access-Control-Allow-Methods: GET, PUT, POST, DELETE, PATCH, OPTIONS';
more_set_headers 'Access-Control-Allow-Headers: DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,X-Client-Identifier';
more_set_headers 'Access-Control-Max-Age: 1728000';
more_set_headers 'Content-Type: text/plain charset=UTF-8';
more_set_headers 'Content-Length: 0';
return 204;
}
more_set_headers 'Access-Control-Allow-Origin: $allow_origin';
more_set_headers 'Access-Control-Allow-Credentials: true';
more_set_headers 'Access-Control-Allow-Methods: GET, PUT, POST, DELETE, PATCH, OPTIONS';
more_set_headers 'Access-Control-Allow-Headers: DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,X-Client-Identifier';
1 Like