Unable to resolve CORS issue with all permissive web origins

Hi, I am using keycloak with angular on front end and flask on backend. I am looking at implementing Authorization Code Flow since we have flask application to handle the client-secrets.

The flow I have got to work so far is

  1. There is a GET endpoint on flask to build the authorization url and redirect the user to this url. This action redirects the url to keycloak login page.
def get(self):
        client = OAuth2Session(
            scope="email profile",

        uri, state = client.create_authorization_url(url=current_app.config["KEYCLOAK_AUTHORIZATION_ENDPOINT"])
        return redirect(uri)
  1. On successful login, keycloak invoked callback is called on flask backend API. This call back will process the response and store the details in database for further processing and then redirect the user to Home page.

The above flow works fine when I access the backend API directly from the browser.

Assuming my flask app is running on localhost:5000, if I access http://localhost:5000/auth/login, I am redirected to keycloak login page and subsequently on authentication to callback.

However, I have an frontend angular application which is now trying to make the request. In this case, the angular app is running on http://localhost:4200.

In the above case, the angular application running http://localhost:4200 is making a call to http://localhost:5000/auth/login. This request comes back with HTTP Redirect response of 302 to keycloak login url. This redirect from angular to keycloak login page fails with CORS error.

My understanding is the keycloak is blocking the request from angular application since the request is done by http://localhost:4200 to http://localhost:8080.

I have configured + as Web origins but I still keep getting CORS error.

I am using bitnami keycloak latest version Docker.

I am not using any keycloak wrapper libs on the angular side of the application.