I’m currently dealing with a CORS issue in my web app setup involving an Angular UI hosted on localhost:4200, Keycloak (Ver. 23.0.5) hosted on localhost:9999, and a Spring Security backend on localhost:8080.
Here’s the problem:
-
When an unauthenticated user on the UI attempts to access a resource on the backend, they are correctly redirected to Keycloak for authentication.
-
However, when Keycloak responds with the login page, the browser throws a CORS error: “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”
Access to XMLHttpRequest at 'http:// 127.0.0.1:9999/realms/uaa/protocol/openid-connect/auth?response_type=code&client_id=gtw&scope=openid%20profile%20roles%20offline_access&state=6BzS-HGf2CgxbY0aQogMcs3TFDuQuBdAuUdmzz0Gagw%3D&redirect_uri=http:// localhost:4200/login/oauth2/code/keycloak&nonce=n9L8mSN3E8T0Y8dtLdrycJi39SDaJJaMVMUEj9fSTvI' (redirected from 'http:// localhost:4200/principal') from origin 'http:// localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Here is my Keycloak Client configuration:
{
"clientId": "gtw",
"name": "",
"description": "",
"rootUrl": "",
"adminUrl": "",
"baseUrl": "",
"surrogateAuthRequired": false,
"enabled": true,
"alwaysDisplayInConsole": true,
"clientAuthenticatorType": "client-secret",
"redirectUris": [
"*"
],
"webOrigins": [
"http://127.0.0.1:4200",
"*"
],
"notBefore": 0,
"bearerOnly": false,
"consentRequired": false,
"standardFlowEnabled": true,
"implicitFlowEnabled": false,
"directAccessGrantsEnabled": true,
"serviceAccountsEnabled": true,
"publicClient": false,
"frontchannelLogout": true,
"protocol": "openid-connect",
"attributes": {
"client.secret.creation.time": "1706544831",
"oauth2.device.authorization.grant.enabled": "false",
"backchannel.logout.revoke.offline.tokens": "false",
"use.refresh.tokens": "true",
"oidc.ciba.grant.enabled": "false",
"backchannel.logout.session.required": "true",
"client_credentials.use_refresh_token": "false",
"tls.client.certificate.bound.access.tokens": "false",
"require.pushed.authorization.requests": "false",
"acr.loa.map": "{}",
"display.on.consent.screen": "false",
"token.response.type.bearer.lower-case": "false",
"login_theme": "",
"frontchannel.logout.url": "",
"backchannel.logout.url": ""
},
"authenticationFlowBindingOverrides": {
"browser": "dbb28714-c0c5-400b-9141-58c651da8e53"
},
"fullScopeAllowed": false,
"nodeReRegistrationTimeout": -1,
"protocolMappers": [
{
"name": "Client Host",
"protocol": "openid-connect",
"protocolMapper": "oidc-usersessionmodel-note-mapper",
"consentRequired": false,
"config": {
"user.session.note": "clientHost",
"introspection.token.claim": "true",
"id.token.claim": "true",
"access.token.claim": "true",
"claim.name": "clientHost",
"jsonType.label": "String"
}
},
{
"name": "Client IP Address",
"protocol": "openid-connect",
"protocolMapper": "oidc-usersessionmodel-note-mapper",
"consentRequired": false,
"config": {
"user.session.note": "clientAddress",
"introspection.token.claim": "true",
"id.token.claim": "true",
"access.token.claim": "true",
"claim.name": "clientAddress",
"jsonType.label": "String"
}
},
{
"name": "Client ID",
"protocol": "openid-connect",
"protocolMapper": "oidc-usersessionmodel-note-mapper",
"consentRequired": false,
"config": {
"user.session.note": "client_id",
"introspection.token.claim": "true",
"id.token.claim": "true",
"access.token.claim": "true",
"claim.name": "client_id",
"jsonType.label": "String"
}
}
],
"defaultClientScopes": [
"web-origins",
"acr",
"roles",
"profile",
"email"
],
"optionalClientScopes": [
"address",
"phone",
"offline_access",
"microprofile-jwt"
],
"access": {
"view": true,
"configure": true,
"manage": true
},
"authorizationServicesEnabled": true
}
Here are the relevant parts of my Spring configuration
app:
idp:
serverUrl: http:// 127.0.0.1:9999
spring:
security:
oauth2:
resourceserver:
jwt:
issuer-uri: ${app.idp.serverUrl}/realms/uaa
client:
provider:
keycloak:
authorization-uri: ${app.idp.serverUrl}/realms/uaa/protocol/openid-connect/auth
token-uri: ${app.idp.serverUrl}/realms/uaa/protocol/openid-connect/token
user-info-uri: ${app.idp.serverUrl}/realms/uaa/protocol/openid-connect/userinfo
jwk-set-uri: ${app.idp.serverUrl}/realms/uaa/protocol/openid-connect/certs
- Configuring web-origins in Keycloak to accept *, http:// localhost:4200 and http:// 127.0.0.1:4200
- Changing Keycloak access level to Confidential as well as Public
- Upgrading to newest version of Keycloak (23.0.5)
