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
In this post we are to going to describe how to solve these errors.