被 CORS 阻止的 Keycloak 身份验证答案

【问题标题】：Keycloak authentication blocked by CORS被 CORS 阻止的 Keycloak 身份验证
【发布时间】：2020-11-16 23:35:47
【问题描述】：

我正在尝试在我的 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 服务器，如果这有什么不同的话

【问题讨论】：

No 'Access-Control-Allow-Origin' header is present on the requested resource.。也许nginx 不传递来自keycloak 的所有标头？您可以查看原始回复吗？

标签： javascript keycloak

【解决方案1】：

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

为了能够使上面的代码工作，只需将“访问类型”字段更改为“公共”即可解决。

我不知道为什么对浏览器的错误响应是 CORS 错误，从我的角度来看，这与第一眼完全无关。

我在尝试使用 Postman 向 http://auth.keycloak.local/auth/realms/sso/protocol/openid-connect/token 发出具有相同正文消息的请求后发现了这一点，在 postman 中它返回更多相关错误，要求我提供客户端密码

【讨论】：