配置Keycloak的Node.js应用Chrome访问遇CORS跨域错误求助

问题描述 #

访问 http://localhost:3101/graphql 时，浏览器控制台抛出CORS错误：

Access to fetch at 'https://com-dns/realms/dev-realm/protocol/openid-connect/auth?client_id=app-next-bff&state=15b78012-7f01-4176-a7c0-f0b7b6e0c22a&redirect_uri=http%3A%2F%2Flocalhost%3A3101%2Fgraphql%3Fauth_callback%3D1&scope=openid&response_type=code' (redirected from 'http://localhost:3101/graphql') from origin 'http://localhost:3101' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Node.js 相关配置代码：

const graphqlPath = "/graphql";
const app = express();
const corsConfig = {
    credentials: true,
    allowedHeaders: ["Authorization", "Content-Type"],
    exposedHeaders: ["Authorization"],
    origin: true,
};

app.use(cors(corsConfig));
const { keycloak, token } = await configureKeycloak(app, graphqlPath);

if (!process.env.KEYCLOAK_GENERATED_TOKEN) {
    process.env.KEYCLOAK_GENERATED_TOKEN = token.access_token.token;
}

app.use(graphqlPath, keycloak.protect());

已尝试：Keycloak客户端有效重定向URI和Web origins设为*，改用机器IP配置，均无效。

核心原因分析 #

错误指向Keycloak的/auth端点未返回Access-Control-Allow-Origin响应头，说明问题不在Node.js应用的CORS配置，而是Keycloak服务器/Realm/客户端的CORS规则未正确生效。

解决方案 #

1. 配置Keycloak Realm级CORS规则 #

进入Keycloak管理控制台，定位到dev-realm：

• 导航至 Realm Settings > Security Defenses > CORS
• 在Allowed Origins中添加http://localhost:3101（避免用*，带凭证的请求下*会触发兼容性问题）
• 勾选Allow Credentials（匹配Node.js配置中的credentials: true）
• 保存配置后重启Keycloak服务

2. 修正Keycloak客户端Web Origins设置 #

进入app-next-bff客户端配置页：

• 将Web Origins改为具体值http://localhost:3101（不要加末尾斜杠）
• 确认Valid Redirect URIs覆盖回调路径：http://localhost:3101/graphql?auth_callback=1 或 http://localhost:3101/*

3. 优化Node.js CORS配置 #

将origin: true改为明确的允许值，避免自动匹配的潜在问题：

const corsConfig = {
    credentials: true,
    allowedHeaders: ["Authorization", "Content-Type"],
    exposedHeaders: ["Authorization"],
    origin: "http://localhost:3101", // 若前端与后端同源可直接用，多环境可改用函数动态判断
};

4. 验证Keycloak端点CORS响应 #

用curl模拟预飞请求，检查Keycloak返回头：

curl -X OPTIONS \
-H "Origin: http://localhost:3101" \
-H "Access-Control-Request-Method: GET" \
-H "Access-Control-Request-Headers: Content-Type" \
-v "https://com-dns/realms/dev-realm/protocol/openid-connect/auth?client_id=app-next-bff&redirect_uri=http%3A%2F%2Flocalhost%3A3101%2Fgraphql%3Fauth_callback%3D1&scope=openid&response_type=code"

若响应中无Access-Control-Allow-Origin头，需重新检查Realm和客户端的CORS配置，或确认Keycloak是否在反向代理后（需配置X-Forwarded-For等头让Keycloak识别真实请求源）。

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