CORS issue with Keycloak using it in React and Web Origins set

Question

Keycloak is running on localhost:8080 (realm - demo, client - demo)
React app is running on localhost:3000

Want to fetch data from Keycloak into React for which first, I need to get an access token. The config used here works in Postman.

useEffect(() => {
  const fetchKeycloakUser = async () => {
    setIsKeycloakUserError(false)

    try {
      const URL =
        'http://localhost:8080/auth/realms/demo/protocol/openid-connect/token'

      const result = await axios({
        method: 'POST',
        url: URL,
        data: {
          username: 'admin',
          password: 'admin',
          client_id: 'admin-cli',
          grant_type: 'password',
        },
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        withCredentials: false, //even 'true' doesn't work
      })
      console.log(result)
    } catch (error) {
      console.log(error)
      setIsKeycloakUserError(true)
    }
  }

  fetchKeycloakUser()
}, [])

The Web Origins for the client 'demo' is this (I've tried '*' and '+' also):

---

And this is the error that I'm getting:

P.S. - This is not using Keycloak inside React. They both are separate apps and I'm only trying to fetch Keycloak data into my React app.

Answer 1

You can try to use a + in "Web origins" for the "security-admin-console" Client in the "master" realm.