No 'Access-Control-Allow-Origin' header CORS error

Getting advice
1

Note: I can’t put url, so replacing it with myip. Sorry for the inconvenience.

My scenario is we have a React client running on myip:3000, and the KeyCloak server (v25.0.1) running on myip:8080. When requesting to the KeyCloak e.g. fetch('myip:8080/realms/myrealm/path/to/my/api'), the chrome browser (v126.0.6478.114) fails with the error

Access to fetch at ‘myip:8080/realms/myrealm/path/to/my/api’ from origin ‘myip:3000’ has been blocked by CORS policy: 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.

The KeyCloak server runs on docker container with custom rest APIs running as providers without a problem when hitting the custom rest endpoint through cURL. For instance,

curl -X POST \
     -H "Content-Type: application/json" \
     --data '{ "a": 1, "b": 2, "c": 3}' \
     myip:8080/realms/myrealm/path/to/my/api

Before testing and hitting the Cors issue, I also configured the client with a new realm myrealm, plus a client e.g. myrealm_client (in Clients > Create Clients > Client ID: myrealm_client, Web origins: *, and Web origins: myip:3000). I had also tested configuring by setting all Clients’ Web origins to *. But the error remains.

Testing the OPTIONS call against KeyCloak returns following result

curl -X OPTIONS   -H "Origin: myip:3000"   -H "Access-Control-Request-Method: POST"   -H "Access-Control-Request-Headers: authorization,x-requested-with"   -k myip:8080/realms/myrealm/path/to/my/api   --silent --verbose 2>&1 | grep Access-Control
> Access-Control-Request-Method: POST
> Access-Control-Request-Headers: authorization,x-requested-with
< Access-Control-Allow-Origin: myip:3000
< Access-Control-Allow-Methods: DELETE, POST, GET, OPTIONS, PUT
< Access-Control-Allow-Credentials: true
< Access-Control-Allow-Headers: Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, DPoP, Authorization
< Access-Control-Max-Age: 3600

Any other places I should also check for fixing this error? Thanks.

[1]. GitHub - jangaraj/keycloak-cors-issue-debugging: Recommendations how to solve/debug CORS issues, when Keycloak IDP is used

2

The CORS error is expected since you’re making a request to another origin. See this previous thread for info.

But I’m curious - what API are you requesting that lives within the Keycloak instance?