我已经使用 vite 创建了 React 应用程序，并且已将该应用程序与 keycloak 连接，但我收到了 CORS 错误

Question

我已经使用 vite 创建了 React 应用程序并将其与 keycloak 连接，但我收到以下错误 -

localhost/:1 从源“http://localhost:5173”访问“http://127.0.0.1:8080/realms/myrealm/protocol/openid-connect/token”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。**

如果用户经过身份验证，我必须显示 Protected.jsx 组件，否则 Public.jsx

到目前为止我还没有使用过任何后端。我的反应应用程序结构是这样的，

/src
  /components
    Public.jsx
    Protected.jsx
  /hooks
    useAuth.jsx
  App.jsx
  main.jsx
  ...other files and folders

useAuth.jsx 文件：

//useAuth.jsx
import React, { useState, useEffect, useRef } from "react";
import Keycloak from "keycloak-js";

const client = new Keycloak({
  URL: "http://127.0.0.1:8080/",
  realm: "myrealm",
  clientId: "myclient",
});

const useAuth = () => {
  const isRun = useRef(false);
  const [isLogin, setLogin] = useState(false);

  useEffect(() => {
    if (isRun.current) return;

    isRun.current = true;
    client
      .init({
        onLoad: "login-required",
      })
      .then((res) => {
        setLogin(res);
      });
  }, []);

  return isLogin;
};

export default useAuth;

App.jsx 文件：

//App.jsx

import Protected from "./components/Protected";
import Public from "./components/Public";

import useAuth from "./hooks/useAuth";

function App() {
  const isLogin = useAuth();

  return isLogin ? <Protected/> : <Public/>;
}

export default App;

受保护的.jsx 文件：

//Protected.jsx

import React from "react";

const Protected = () => {
  return <div>Protected</div>;
};

export default Protected;

Public.jsx 文件：

//Public.jsx

import React from "react";

const Public = () => {
  return <div>Public</div>;
};

export default Public;

Answer 1

CORS 错误是您的浏览器告诉您服务器不希望您与浏览器中给定的 URL 进行交互。

这与你的 React 代码没有直接关系，而是你的 KeyCloak 配置的问题。

您需要将浏览器网址（在您的情况下是http://127.0.0.1:5173/）添加到Keycloak客户端设置的“Web Origins”字段中。