Search code examples
javavue.jskeycloakquasar

How to avoid no Access-Control-Allow-Origin header is present on the requested resource


I have a webapp that is running on NGINX and it is secured with Keycloak. After successfully sign in through the Keycloak login, it redirects me to the webapp as expected.

However, when I look into the web browser console it shows the following error messages:

enter image description here

The Web Origins is configured as:

enter image description here

How to avoid the error message? Do I miss any configuration on NGINX?

Hint, the webapp is developed by https://quasar.dev/.


Solution

  • You didn't configure Keycloak OIDC client correctly, so Keycloak didn't set proper CORS headers.

    https://dev.oidc.databaker.io/* is not valid origin (/* at the end is a problem). https://dev.oidc.databaker.io is correct origin. But you will see that different origin was used, when you check error from the browse console. It looks like https://dev.databaker.io was used. So configure web origin of used Keycloak OIDC client properly and CORS issue should be solved.