Keycloak duplicated "Access-Control-Allow-Origin" causing cors error

Viewed 1212

I'm having an issue using the keycloak-js adapter on a React front-end.

After login a duplicated 'Access-Control-Allow-Origin' on the /token endpoint causes a CORS error:

Access to XMLHttpRequest at 'https://accounts.example.com/auth/realms/myRealm/protocol/openid-connect/token' from origin 'https://example.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'https://example.com, *', but only one is allowed.

The response header:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Access-Control-Allow-Methods

Keycloak 9 is running in standalone mode behind an Nginx proxy on https://accounts.example.com.

The keycloak-js adapater configuration:

{
  "realm": myRealm,
  "url": https://accounts.example.com/auth,
  "clientId": myClientId,
  "enable_cors": true
}

I already tried multiple combinations for the client "Web Origins":

https://example.com, *, +, but I can't figure out why I got an extra Header Access-Control-Allow-Origin: *.

2 Answers

We have discovered that our own proxy were writing Access-Control-Allow-Origin header as well. That's why together with keycloak we got it twice.

Our devops team has fixed the code of our proxy and it works now.

* is not valid value for Access-Control-Allow-Origin for sites running on https.

Remove * from web origins client configuration in the Keycloak and configure all used web origin explicitly (no wildchars).

Related