在 React 和 Web Origins 集中使用 Keycloak 的 CORS 问题

Question

Keycloak 运行 localhost:8080 （领域 - 演示，客户端 - 演示）
React 应用程序运行 localhost:3000

想要从 Keycloak 获取数据到 React 中，为此我首先需要获得一个访问令牌。此处使用的配置适用于 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()
}, [])

客户端 'demo' 的网络起源是这样的 （我也试过“*”和“+”）：

这是我遇到的错误：

P.S。 - 这不是使用 Keycloak inside React。它们都是独立的应用程序，我只是想将 Keycloak 数据提取到我的 React 应用程序中。

Answer 1

您可以尝试在“主”领域中的“security-admin-console”客户端的“Web 来源”中使用 +。

Answer 2

我通过 nginx 代理使它工作。对于任何需要帮助的人，这就是我 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;
    }
  }
}
...

而不是 localhost:3000，现在您可以在 localhost/mde 访问您的 React 应用程序，并且不会遇到任何 CORS 错误。

在 React 和 Web Origins 集中使用 Keycloak 的 CORS 问题

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

reactjs

keycloak