keycloak - No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

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

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.

Answer 1

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).