Keycloak身份验证被CORS阻止

Question

我正在尝试在我的React应用程序中使用Keycloak Javascript适配器，但是从登录页面重定向后，它不会对我进行身份验证，而是给了我CORS错误

Access to XMLHttpRequest at 'http://auth.keycloak.local/auth/realms/sso/protocol/openid-connect/token' from origin 'http://192.168.0.5:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是我的Javascript页面

import React from 'react';
import './App.css';
import Keycloak from 'keycloak-js';

const initKeycloak = async () => {
    const keycloak = new Keycloak({
        realm: 'sso',
        url: 'http://auth.keycloak.local/auth/',
        clientId: 'sso-management',
    });

    try {
        const isAuthorised = await keycloak.init({ onLoad: 'login-required' });
        console.log(isAuthorised);
    } catch (error) {
        console.log(error);
    }
};

function App() {
    initKeycloak();
    return (
        <div className="App">
            hello world
        </div>
    );
}

export default App;

这是我的keycloak客户端配置

我想念什么吗？

如果这有什么区别，我正在本地计算机上使用Nginx反向代理作为Keycloak服务器

Answer 1

显然，在这种特殊情况下，由于客户端的“访问类型”为“机密”，因此在连接到密钥库服务器时，我需要传递客户端密码。

要使上面的代码起作用，就是将“访问类型”字段更改为“公共”，这将解决该问题。

我不知道为什么浏览器的错误响应是CORS错误，从我的角度看，这绝对是无关紧要的。

我尝试使用邮递员向http://auth.keycloak.local/auth/realms/sso/protocol/openid-connect/token发送带有相同正文消息的请求后弄清楚了，在邮递员中它返回了更多相关错误，要求我提供客户机密