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 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
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
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
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…
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,
@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';
