26 Feb 2022

React KeyCloak : keycloak js header Access-Control-Allow-Origin sent twice in response

React js

Hello I now integrate keycloak with my react app.

We admin the server to deal :

- //localhost:xxxx
- //
with the same domain as our keycloak server

With the second link  // we got the error

 we get CORS error : 

Access to XMLHttpRequest at '//' from origin '//' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '//, //, but only one is allowed.
keycloak.js:750          POST // net::ERR_FAILED 200

 With the first link //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 //localhost:xxxx

Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
With the second link // 

Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site


Thanks for your help




6 Mar 2022

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!

© 2023 Copyrights reserved for