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)**:
[![enter image description here](https://i.stack.imgur.com/1DMBo.png)](https://i.stack.imgur.com/1DMBo.png)

---

And this is the error that I'm getting:
[![enter image description here](https://i.stack.imgur.com/7Ip2u.png)](https://i.stack.imgur.com/7Ip2u.png)

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.