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

Getting advice
1

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

And this is the error that I’m getting: enter image description here

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.

2

BTW: http://localhost:3000/* is not valid Origin - Origin - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

3

Even http://localhost:3000 did not work and as I mentioned in the question, neither did “*” or “+”

4

Again:

5

This is a really bad developer experience, given that there’s absolutely no provision of a simple toggle to bypass CORS in localhost development. Nevertheless, I got it working by proxying through nginx. For anyone who needs help, this is what I have in my nginx.conf:

...
http{
  ...
  # this is where my React app runs, you can name it whatever you like
  upstream mde{
    server localhost:3000;
  }
  # this is the standard port where keycloak runs
  upstream kc{
    server localhost:8080;
  }
  server{
    listen 80;
    server_name localhost;
    location /mde {
      proxy_pass http://mde;
    }
    location /auth {
      proxy_pass http://kc;
    }
  }
}
...

Instead of localhost:3000, now you can access your React app at localhost/mde and won’t face any CORS errors.

6

That experience depends on many components and Keycloak is only one from many. I would say the key component is a browser.

You have implemented only work around - you are running everything from one origin, but I guess your prod setup won’t have that. You may have CORS issue again in the prod deployment.