JHipster and OAuth2 with Keycloak separating the front-end from the back-end

 JHipster  Comments Off on JHipster and OAuth2 with Keycloak separating the front-end from the back-end
Oct 202019
 

If you build a default monolithic application JHipster with Angular and OAuth2 as your type of authentication using Keycloak, everything works apparently well. However, if you want to separate back-end from front-end (for that, you need to set SERVER_API_URL variable defined in the webpack.commons.js, as it is mentioned here), you will get several errors in the console of your web browser, such as,

Access to XMLHttpRequest at 'http://localhost:8080/oauth2/authorization/oidc' (redirected from 'http://localhost:8080/api/account') from origin 'http://localhost:9000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Some images of these errors are displayed in the following pictures

Errors in console
Error in network

In this post we are to going to describe how to solve these errors.

Continue reading »