No 'Access-Control-Allow-Origin' header is present on the requested resource in Keycloak 21

Question

I'm trying to configure React app to work with Keycloak 21 and Spring Boot gateway. When I open remotely hosted React page and page a GET request I get error into browser:

Access to XMLHttpRequest at 'https://ip/realms/admin_console_realm/protocol/openid-connect/auth?response_type=code&client_id=admin_console_client&scope=openid&state=ze9ujRxcOaI9PhgKXozIsGd0VDCnjXSF9-u_t_8bXA0%3D&redirect_uri=http://ip/login/oauth2/code/keycloak&nonce=O9rOLQ0HH-eHZFi76hW08w2r3aCmn2Enm8df68HQvBA' (redirected from 'https://ip/api/microservice/dashboard/test') from origin 'https://xxxxxxx-xi.vercel.app' 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.

Unfortunately all solutions on Google are for old version of Keycloak. Do you know into the latest version any working solution?

EDIT: I use nginx configured as a reverse proxy with this setup:

server {
    server_name api2.domain.org;
    index index.html index.htm;
    access_log /var/log/nginx/bmiapp.log;
    error_log  /var/log/nginx/bmiapp-error.log error;

    location / {

        
            if ($request_method = 'OPTIONS') {
                add_header Access-Control-Allow-Origin '*' always;
                add_header Access-Control-Allow-Headers '*';

                return 204;
            }

            if ($request_method != 'OPTIONS') {
                add_header Access-Control-Allow-Origin '*' always;
            add_header Access-Control-Allow-Headers '*';
            add_header Access-Control-Allow-Methods '*';
            add_header Access-Control-Allow-Credentials 'true';
            }

        proxy_pass http://ip:8138;
}


    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/api2.domain.org/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/api2.domain.org/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}


server {
    if ($host = api2.domain.org) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    server_name api2.domain.org;
    listen 80;
    return 404; # managed by Certbot
}

But I get error:

Access to fetch at 'https://api2.domain.org/api/microservice/dashboard/test' from origin 'https://main.dyyfxsm3lnw8e.amplifyapp.com' has been blocked by CORS policy: Request header field mode is not allowed by Access-Control-Allow-Headers in preflight response.

Is there some solution how to fix this error?

Answer 1

To fix this, you can update your Nginx configuration to explicitly allow the mode header in the Access-Control-Allow-Headers directive. Modify your Nginx configuration as follows:

    location / {
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin '*' always;
            add_header Access-Control-Allow-Headers '*';

            # Add 'mode' to the list of allowed headers
            add_header Access-Control-Allow-Headers 'mode';

            return 204;
        }

By adding add_header Access-Control-Allow-Headers 'mode';, you explicitly allow the mode header in the CORS policy. Restart Nginx after making these changes for the configuration to take effect.