CORS Error with Keycloak despite correct Web Origins and setup in Docker environment

Question

I'm experiencing a persistent CORS issue when integrating Keycloak (v26.0.7) with my application running in a Docker environment. Despite having configured Web Origins and Redirect URIs correctly in Keycloak, I'm still facing CORS errors in the browser.

Environment Setup

Keycloak Version: 26.0.7 (running in Docker)
Frontend: React app at http://localhost:3000
Backend: Spring Gateway at http://localhost:8080
Docker Compose Keycloak Configuration:

saip-keycloak:
  image: quay.io/keycloak/keycloak:26.0.7
  container_name: saip-keycloak
  ports:
    - "8090:8080"
  volumes:
    - ./keycloak/dev/seed/realm-import.json:/opt/keycloak/data/import/realm-import.json
    - ./keycloak/dev/custom-theme:/opt/keycloak/themes/custom-theme
  environment:
    - KC_DB=mariadb
    - KC_DB_URL=jdbc:mariadb://saip-mariadb-auth:3306/saip_auth_db
    - KC_DB_USERNAME=auth_user1
    - KC_DB_PASSWORD=auth_user1
    - KC_BOOTSTRAP_ADMIN_USERNAME=admin
    - KC_BOOTSTRAP_ADMIN_PASSWORD=admin
    - JAVA_OPTS_APPEND=-Dkeycloak.logging.level=DEBUG
    - KC_SPI_HOSTNAME_DEFAULT_FORWARDED=true
  command: [
    "start-dev",
    "--import-realm",
    "--log-level=DEBUG",
    "--hostname=localhost"
  ]

Keycloak Settings

Web Origins:
- http://localhost:3000
- http://localhost:8080
Valid Redirect URIs:
- http://localhost:3000/*
- http://localhost:8080/*
Valid Post Logout Redirect URIs:
- http://localhost:3000

Problem Description

When a user accesses the frontend (http://localhost:3000) and attempts to authenticate via Keycloak, the following flow occurs:

The client sends a request to the backend (http://localhost:8080/success-page).
If not authenticated, the backend redirects the user to the Keycloak login page at http://localhost:8090.
The browser then encounters a CORS error while trying to access Keycloak's login page or its static resources (e.g., CSS, JS).

Here's what I've verified so far:

CORS Headers Missing: In the browser's network tab, I can see that Access-Control-Allow-Origin is missing in the response headers from Keycloak.
Preflight Request Fails: The browser's OPTIONS (preflight) request to Keycloak doesn't return the required CORS headers.
Keycloak Logs: Debug logs don't show any errors, and authentication flow appears to be processed normally.

What I've Tried

Keycloak Configuration:
- Ensured that Web Origins and Valid Redirect URIs are correctly configured.
- Added KC_SPI_HOSTNAME_DEFAULT_FORWARDED=true to the Keycloak Docker environment.
Frontend Configuration:
- Verified that the frontend uses the correct Keycloak client.
Spring Gateway:
- Implemented a CorsConfigurationSource to allow CORS for all paths:

@Bean
public CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.addAllowedOrigin("http://localhost:3000");
    configuration.addAllowedMethod("*");
    configuration.addAllowedHeader("*");
    configuration.setAllowCredentials(true);
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

Keycloak HTTP Configuration:
- Tested Keycloak with KC_RESPONSE_HEADERS to explicitly add Access-Control-Allow-Origin, but no change.
Keycloak Theme:
- Explored modifying the Keycloak login page's Freemarker template (login.ftl) to add meta tags for CORS headers but prefer not to rely on this hack.

Constraints

I cannot open all origins (*) due to security concerns.
I prefer not to use a reverse proxy to handle CORS for Keycloak.

Questions

Why is Keycloak not responding with Access-Control-Allow-Origin in the CORS headers, even though Web Origins is correctly set?
Is there a specific Keycloak configuration or Docker setting I'm missing to ensure proper CORS handling?
Are there any known issues with CORS in Keycloak v26.0.7 or a better way to debug/prevent this issue?

Additional Context

Here's a snippet of the browser error:

Access to fetch at 'http://localhost:8090/realms/testrealm/protocol/openid-connect/auth' from origin 'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Note

In my case, it is the backend server that acts as the Client in the OAuth 2.0 flow, not the frontend server.

This means that the backend server, not the frontend server, is the entity that makes authentication requests to the Keycloak authentication server.

The user only performs the authentication when requested to do so.

Flow

:3000/test → Button click (request to the backend :8080/success-page)
(302 redirect) → :8080/oauth2/authorization/keycloak
(302 redirect) → :8090/realms/testrealm/protocol/openid-connect/auth/...

CORS Error Description

• The CORS error does not occur when redirecting from the frontend server to the Spring Boot backend server (:8080).

• However, the problem begins when redirecting from the backend server (:8080) to the Keycloak authentication server (:8090).

• During this step, the Origin header becomes null.

• Keycloak detects the null origin and, as a result, does not include CORS-related headers in its response.

• When the browser receives the response from Keycloak without the required headers, it triggers a CORS error.