Node.js – Keycloak CORS issue when being redirected to login

corsexpresskeycloaknode.js

I am trying to get the nodeJS keycloak adapter working with my Express application, but am facing a CORS issue when it tries to redirect to the login page for routes I have protected with the keycloak middleware:

XMLHttpRequest cannot load
http://192.168.132.44:8080/auth/realms/Actora/protocol/openid-connect/auth?client_id=actora-test&state=0e9c9778-c41b-4aa8-8052-d0f0125045ac&redirect_uri=http%3A%2F%2Flocalhost%3A5001%2Fauth%2Fchecktoken%3Fauth_callback%3D1&scope=openid&response_type=code.
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:5001' is therefore not allowed
access.

In my keycloak client settings I have added a single value of '*' to the Web Origins config section.

I have also enabled cors on my node express application using the node cors library, following this express guide here

var cors =  require('cors'),
  app = express();

app.use(cors());
app.options('*', cors()); //enable for all pre-flight requests

I using version 3.2.1 of keycloak in case that makes any difference (I see a new version is out as an RC)

Has anyone faced similar issues and managed to resolve? I have been digging through many JBOSS mailing list threads and other stackoverflows, and all seem to suggest its as simple as adding the '*' entry to the web origins config section for the client on the keycloak admin site but this is not the case for me.

Thanks

Best Answer

I am also working on this issue with mindparse.

I think the key issue here is that the keycloak server is not responding with any ACCESS-CONTROL-ALLOW-ORIGIN headers despite the fact that he has correctly configured the "web Origins" setting in the keycloak admin portal.

A more in depth flow of the process is:

The user attempts to call a keycloak secured route on a node express server
Keycloak middleware detects that the user is not authenticated and responds to the request with a 302 (redirect) to a custom login page hosted by the keycloak server.
The browser sends an OPTIONS request to the keycloak server to check if it is because it is a cross origin request.
The keycloak servers response DOES NOT include the ACCESS-CONTROL-ALLOW- ORIGIN header to tell the browser that it has permission to make this request.
The browser then reads this response and therefore does not make the follow up request because it did not pass the access control allow origin checks

Related Solutions

Invalid redirect_uri Keycloak when client is not on localhost

I was having the same exact problem. My spring boot app sits behind nginx. I updated nginx to pass through the x-forwarded headers and updated the spring boot config with

spring boot yaml config:

server:
  use-forward-headers: true    

keycloak:
  realm: myrealm
  public-client: true
  resource: myclient
  auth-server-url: https://sso.example.com:443/auth
  ssl-required: external
  confidential-port: 443

nginx config:

upstream app {
   server 1.2.3.4:8042 max_fails=1 fail_timeout=60s;
   server 1.2.3.5:8042 max_fails=1 fail_timeout=60s;
}

server {
    listen 443;
    server_name www.example.com;

    ...

    location / {
        proxy_set_header        Host $host;
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        X-Forwarded-Proto $scheme;
        proxy_set_header        X-Forwarded-Host $host;
        proxy_set_header        X-Forwarded-Port   443;

        proxy_next_upstream     error timeout invalid_header http_500;
        proxy_connect_timeout   2;

        proxy_pass          http://app;
    }
}

The specific change that made it work for me was adding keycloak.confidential-port. Once I added that it was no longer adding port 0 in the redirect_uri.

The only setting I have in Keycloak > Cofigure > Realm > Clients > my-client is Valid Redirect URIs set to: https://www.example.com/*

Hope that helps. It took me hours to track this down and get it working.

Reactjs – Keycloak CORS issue associated with login redirect

Imagine the following json below is your Keycloak configuration:

{
  "realm" : "cors",
  "resource" : "cors-database-service",
  "auth-server-url": "http://localhost-auth:8080/auth",
  "bearer-only" : true,
  "ssl-required": "external",
  "enable-cors": true
}

Try adding the last line to your configuration file. Let me know if it worked for you!

OBS: I'm facing the same issue, but I'm using Wildfly/JBOSS adapters and making this configuration inside the application server.

@EDIT: This worked fine for me.

Try changing the "Access Type" to bearer-only inside your REST Client on Keycloak.

Also, don't forget to add the parameter {"{"Authorization" : "bearer " + $TOKEN} when sending HTTP requests from your client to your RESTful API.

Best Answer

Related Solutions

Invalid redirect_uri Keycloak when client is not on localhost

Reactjs – Keycloak CORS issue associated with login redirect

Related Topic