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

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 () => {

    try {
      const URL =

      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
    } catch (error) {

}, [])

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.

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

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


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:

  # 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;
    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.

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.