Spring Boot - Angular CORS issue while redirecting to Keycloak Login Page

Question

I have a simple Rest API written in Spring Boot. I have implemented OAuth2 with Keycloak. I have a UI written in Angular.

My expectation is, when I hit the API url from the Angular Page (say a Button click), I should be redirected to Keycloak Login Page. But when I try to access the API from Angular Application, I am getting the below error.

Access to XMLHttpRequest at 'http://localhost:8080/realms/CloudBrokerRealm/protocol/openid-connect/auth?response_type=code&client_id=cloud-broker-client2&scope=openid&state=pgUtz5IX5ONC3NQ6o9v3IbPnB2DB9rUr3O40tuRxGHY%3D&redirect_uri=http://localhost:8085/login/oauth2/code/keycloak&nonce=CjpTbFvhBqxD0Rz4SQk49rT-wsB3C279NlGHDExlh6M' ( redirected from 'http://localhost:8085/scheduler/read' ) from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

When I hit the API http://localhost:8085/scheduler/read by clicking a Button from Angular, It is trying to redirect to Keycloak Login page but due to CORS error, Login page of Keycloak is not coming.

For accessing the backend API http://localhost:8085/scheduler/read, I have done the CORS configuration in Spring Boot and no CORS issues with this API when I directly accessing this API url from browser and Keycloak Login Page is coming. But the issue is occurring when from Angular Application running in http://localhost:4200, we are trying to hit the API and it is trying to redirect to Keycloak Login Page http://localhost:8080/realms/CloudBrokerRealm/protoco.......

I have added Web Origins in Keycloak under the client but still CORS issue persists. Is there any way to bypass the CORS issue or can we disable the CORS in Keycloak. I am running Keycloak as a docker container.

Spring Boot application.properties:

server.port=8085

spring.security.oauth2.client.registration.keycloak.client-id=cloud-broker-client2
spring.security.oauth2.client.registration.keycloak.authorization-grant-type=authorization_code
spring.security.oauth2.client.registration.keycloak.scope=openid

spring.security.oauth2.client.provider.keycloak.issuer-uri=http://localhost:8080/realms/CloudBrokerRealm
spring.security.oauth2.client.provider.keycloak.user-name-attribute=preferred_username


spring.security.oauth2.resourceserver.jwt.issuer-uri=http://localhost:8080/realms/CloudBrokerRealm

Answer 1

Apparently, you configured your REST API as client (using spring-boot-starter-oauth2-client and oauth2Login).

This is wrong. REST APIs are resource-server and must be configured with spring-boot-starter-oauth2-resource-server . If you don't know how, follow my tutorials .

To ease OAurh2 handling on the client, use an OIDC client library. My favorite for Angular is angular-auth-oidc-client .

Once both points above are solved, only http://localhost:4200 will be necessary as allowed origin on both Keycloak and your REST API.