When using Keycloak for the authentication of web applications, we will often encounter Web Origin-related errors such as “Access to XMLHttpRequest at ‘http://localhost:8080/auth/realms/huongdanjava/protocol/openid-connect/token’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”
The reason is that today browsers always enable the same-origin security policy CORS (Cross-origin resource sharing). To put simply about this policy, if your web application calls other apps, different domains, you need that application to accept your web application’s domain by returning the Access-Control-Allow -Origin response header when the response returns. The value of this Access-Control-Allow-Origin header needs to contain the domain of your web application or the “*” value to allow all Web Origin.
Because of the above policy, when you use Keycloak for your web applications, you also need to configure Web Origin in Keycloak so that it returns the Access-Control-Allow-Origin header when the request comes from these Web Origin.
To configure Web Origin in Keycloak, you need to go to the Client’s configuration section. In the Setting section, you’ll see a field that allows us to configure Web Origin. Enter the domain of your web application, my example as follows:
then login back into the application, you will not see the error above any more.
You can add more Web Origin if you want by clicking the (+) button.
If you want to allow all Web Origin sites, just configure this Web Origin section with the value “*”:
Now login back into the application, you will not see the above error.