How configure CORP with Keycloak?

Question

I got the following setup:

https://localhost:1234 -> React app using keycloak-js and @react-keycloak/web http://localhost:8080 -> Keycloak (docker)

The React app is configured to use the keycloak instance.

If I'm trying to access my webapp I get the following network error:

GET http://localhost:8080/auth/realms/REALMNAME/protocol/openid-connect/3p-cookies/step1.html
not-set cross-origin-resource-policy

My browser blocks the request cause the cross-origin-resource-policy header is missing.

Same error if I host my react app on https://localhost:1234 and use a productive keycloak on https://id.domain.de, so it seems like there is no issue with ssl.

It does work if I use my productive keycloak and productive react app on a server with different subdomains. (https://id.domain.de and https://ui.domain.de).

Any ideas how to fix this? :)

Answer 1

You have to enable Web origins for your react app url. I believe that your client's Web Origin is enabled for the one which is working for you. You can enable Web-Origin for part from Realms -> Client -> Select Client-> Web Origins

Web Origins

This option centers around CORS which stands for Cross-Origin Resource Sharing. If browser JavaScript tries to make an AJAX HTTP request to a server whose domain is different from the one the JavaScript code came from, then the request must use CORS. The server must handle CORS requests in a special way, otherwise the browser will not display or allow the request to be processed. This protocol exists to protect against XSS, CSRF and other JavaScript-based attacks.