nico
Published in : 2022-02-26
Hello I now integrate keycloak with my react app.
We admin the server to deal :
- https://localhost:xxxx
- https://xxxxxx.xxxxx.net
with the same domain as our keycloak server
With the second link https://xxxxxx.xxxxx.net we got the error
we get CORS error :
Access to XMLHttpRequest at 'https://sso.xxx.net/auth/realms/xxx/protocol/openid-connect/token' from origin 'https://yyyy.xxx.net' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'https://yyyy.xxx.net, https://yyyy.xxx.net, but only one is allowed.
keycloak.js:750 POST https://sso.xxx.net/auth/realms/xxx/protocol/openid-connect/token net::ERR_FAILED 200
With the first link https://localhost:xxxx all is working fine.
The main difference I could see is in the two requests for cors in the request headers:
With the first link https://localhost:xxxx
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
With the second link https://xxxxxx.xxxxx.net
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
Thanks for your help
nico Date : 2022-03-06
Best answers
4
Best answers
4
Hello I realised that the keycloak is behind a reverse-proxy HAProxy.
It is very likely that both keycloak first then HAProxy added the headers in the response… when we have the cors triggered !
I will ask this week the admin as he was on holidays.
I think my answer can help other people : remember to look at the full scope of the environment!
Join our community and get the chance to solve your code issues & share your opinion with us
Sign up Now