React请求Node.js API时Keycloak CORS错误排查求助

问题核心分析 #

从错误信息可以看出：请求被后端重定向到了Keycloak的授权端点，但该重定向响应没有携带CORS头，导致浏览器拦截。这是因为你当前的后端Keycloak配置是传统Web应用的重定向认证模式，而非API场景的Bearer Token验证模式——即便前端已经传递了有效Token，中间件仍会触发重定向逻辑，而非直接验证Token。

解决方案步骤 #

1. 调整Keycloak API客户端配置 #

登录Keycloak后台，进入project-realm的project-api客户端页面：

• 客户端类型：将Access Type改为confidential（后端API属于保密客户端，需通过密钥与Keycloak交互）
• Web Origins：设置为http://localhost:3000（不要用*，生产环境替换为实际前端域名，支持多个域名用逗号分隔）
• 凭证管理：切换到Credentials标签，复制生成的Secret值，替换后端配置中的credentials.secret

2. 修改后端Express配置（核心修正） #

移除不必要的Session中间件，开启Keycloak的Bearer Token专属验证模式：

const bodyParser = require('body-parser');
const express = require('express');
const {NodeAdapter} = require('ef-keycloak-connect');
const mongoose = require('mongoose');
const cors=require("cors");

const app = express();

const config = {
  "realm": "project-realm",
  "auth-server-url": "http://localhost:8080/",
  "ssl-required": "external",
  "resource": "project-api",
  "verify-token-audience": true,
  "credentials": {
      "secret": "替换为你从Keycloak获取的API客户端密钥"
  },
  "confidential-port": 0,
  "policy-enforcer": {}
}

// 关键配置：开启bearerOnly，强制中间件只验证请求头中的Bearer Token，不触发重定向
const keycloak = new NodeAdapter({...config, bearerOnly: true});

// 优化CORS配置，明确允许Authorization头和指定前端源
app.use(cors({
  origin: 'http://localhost:3000',
  allowedHeaders: ['Authorization', 'Content-Type'],
  methods: ['GET', 'POST', 'PUT', 'DELETE']
}));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 移除Session中间件：API场景不需要Session，这是导致重定向的根源之一
// app.use(session({...}));

app.use(keycloak.middleware());

const productsRouter = require('./routes/products');
app.use('/products', keycloak.protect(), productsRouter);

3. 前端请求验证 #

确保前端的/products请求正确代理到后端（比如在React的package.json中配置"proxy": "http://localhost:5000"），或直接使用完整路径http://localhost:5000/products，避免路径解析错误。

原理说明 #

• 开启bearerOnly: true后，Keycloak中间件会跳过传统Web应用的重定向认证流程，仅解析并验证请求头中的Authorization: Bearer <token>，验证失败时返回401 Unauthorized而非重定向，此时后端的CORS配置会正常生效。
• 移除Session中间件是因为API场景不需要维护用户会话，Session是为传统服务端渲染应用设计的，会干扰Bearer Token的验证逻辑。

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