1

We are facing issue in accessing nodejs app from chrome for which keycloak is configured.

Keycloak version: 21.0.1

We are trying to access http://localhost:3101/graphql from chrome and it show below error from browser console.

Access to fetch at 'https://com-dns/realms/dev-realm/protocol/openid-connect/auth?client_id=app-next-bff&state=15b78012-7f01-4176-a7c0-f0b7b6e0c22a&redirect_uri=http%3A%2F%2Flocalhost%3A3101%2Fgraphql%3Fauth_callback%3D1&scope=openid&response_type=code' (redirected from 'http://localhost:3101/graphql') from origin 'http://localhost:3101' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

We are adding /graphqlwhile instantiating keycloak in node js

        const graphqlPath = "/graphql";
        const app = express();
        const corsConfig = {
            credentials: true,
            allowedHeaders: ["Authorization", "Content-Type"],
            exposedHeaders: ["Authorization"],
            origin: true,
        };

        app.use(cors(corsConfig));
        const { keycloak, token } = await configureKeycloak(app, graphqlPath);

        if (!process.env.KEYCLOAK_GENERATED_TOKEN) {
            process.env.KEYCLOAK_GENERATED_TOKEN = token.access_token.token;
        }

        app.use(graphqlPath, keycloak.protect());

Valid redirect URIs and Web origins are configured with "*", I tried with http://ip also but no luck

enter image description here

I tried using ip address of machine instead of local host and updated in realm's client also but same exist.

I have seen many questions regarding keycloak and tried it's answers but none helped.

Please let me know if any one needs more info.

Raushan
  • 307
  • 3
  • 12

1 Answers1

0

The SSO system you are using (OpenID) works by redirecting the user to the Keycloak website where they can enter credentials into a form and then be redirected back to your site along with a token which proves they are a valid user.

Since this process involves the user actually visiting and interacting with the third party site directly, you cannot use Ajax for this (and a system like this can't be built to work with Ajax since that would mean the system would have to trust you with the user's credentials which would defeat the object of having a third party identify authenticator).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Ok, but my understanding is user already logged into keycloak and browser cookie set to have a valid token. So keycloak should validate it as a valid user. Note: Accesing http://localhost:3101/graphql redirects to keycloak website and redirects with cors error. – Raushan Jun 27 '23 at 17:01
  • 1
    It doesn't matter if the user is already logged into keycloak. They still need to visit the keycloak site and click the button to say "I, the person you (Keycloak) recognise by this cookie, want to share some of the data you (still Keycloak) hold on me with Raushan's site". You get a CORS error because the page **can't be accessed via Ajax** for the reasons described in the answer. – Quentin Jun 27 '23 at 17:04