title: CORS issue with Keycloak using it in React and Web Origins set
body: <p>Keycloak is running on localhost:8080 <strong>(realm - demo, client - demo)</strong> <br />
  React app is running on localhost:3000 <br /></p>
  <p>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.</p>
  <pre><code>useEffect(() =&gt; {
    const fetchKeycloakUser = async () =&gt; {
      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()
  }, [])
  </code></pre>
  <p>The Web Origins for the client 'demo' is this <strong>(I've tried '*' and '+' also)</strong>:
  <a href="https://i.stack.imgur.com/1DMBo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1DMBo.png" alt="enter image description here" /></a></p>
  <hr />
  <p>And this is the error that I'm getting:
  <a href="https://i.stack.imgur.com/7Ip2u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Ip2u.png" alt="enter image description here" /></a></p>
  <p>P.S. - This is not using Keycloak <em><strong>inside</strong></em> React. They both are separate apps and I'm only trying to fetch Keycloak data into my React app.</p>