React应用无法跳转至Keycloak登录页问题排查（Express集成）

问题情况 #

已完成Keycloak与ExpressJS的集成配置，编写了前端axios请求脚本和后端处理脚本，但点击登录按钮发送请求后，并未跳转至预期的Keycloak登录页，反而出现错误。尝试过在Keycloak的Web Origin字段添加+等网上方案，均未解决问题。

相关截图：

• 前端报错页面截图
• Keycloak配置页面截图

前端请求代码 #

const PORT = 3001
const HOST = `http://localhost:${PORT}`;

/**
 * 登录请求函数
 * @param user 用户名
 * @param pwd 密码
 **/
export function loginRequest(user, pwd,) {
    axios.post(`${HOST}/ `, {
        email: `${user}`,
        pwd: `${pwd}`
    })
        .then(function (res) {
            return res.data
        })
        .catch(function(err) {
            console.log('发送登录请求时出错 :', err);
        })

    return false;
}

排查与解决建议 #

• 修正请求路径：前端请求URL末尾存在空格${HOST}/ ，会导致后端路由匹配失败，先删除空格改为${HOST}/。
• 对齐Keycloak标准流程：Keycloak授权码模式下，无需前端直接传递账号密码到后端，后端应触发重定向至Keycloak登录页。检查后端是否正确配置keycloak-connect中间件，并在登录路由上添加Keycloak保护逻辑。
• 核对CORS配置：确认Keycloak客户端的Web Origin已包含前端实际运行的域名（比如http://localhost:3000），同时后端需配置CORS允许前端域名的请求。
• 调整前端异步逻辑：当前loginRequest函数直接返回false，且axios请求为异步操作，无法正确处理返回值，可将函数改为异步函数，或调整逻辑等待请求完成。

内容的提问来源于stack exchange，提问作者Florent Akpro