Question 186401 in Nginx Question posted in
The official documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    add your IP address or domain name with port and scheme on the client configuration page under Web origins e.g. Web Origins https://xxxxxxx-xi.vercel.app

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search