从Swagger UI请求Keycloak时出现CORS错误的求助

核心原因分析 #

这个错误本质是：Swagger UI尝试用CORS请求（fetch/ajax）调用Keycloak的授权端点，但该端点实际返回的是重定向（跳转到登录页）而非JSON响应。浏览器检测到响应缺少CORS头，因此抛出错误，但重定向流程本身不受影响，所以登录后请求能正常执行。

解决方案 #

1. 修正Keycloak的Web Origins配置

将Keycloak客户端的Web Origins从*改为具体的Swagger地址：http://localhost:5055。

• 原因：*通配符在涉及重定向或带凭证的CORS场景中，可能被浏览器或Keycloak的安全策略限制，明确指定origin能确保CORS头正确返回。

2. 调整Swagger UI的OAuth2配置

确保Swagger遵循标准的授权码流程，避免用AJAX请求授权端点：

在ASP.NET Core的Swagger配置中添加完整的OAuth2支持：

builder.Services.AddSwaggerGen(options =>
{
    options.AddSecurityDefinition("oauth2", new OpenApiSecurityScheme
    {
        Type = SecuritySchemeType.OAuth2,
        Flows = new OpenApiOAuthFlows
        {
            AuthorizationCode = new OpenApiOAuthFlow
            {
                AuthorizationUrl = new Uri("http://localhost:7777/realms/dc2-local/protocol/openid-connect/auth"),
                TokenUrl = new Uri("http://localhost:7777/realms/dc2-local/protocol/openid-connect/token"),
                Scopes = new Dictionary<string, string>
                {
                    { "openid", "OpenID Connect基础权限" }
                    // 按需添加你的API所需的其他权限scope
                }
            }
        }
    });

    options.AddSecurityRequirement(new OpenApiSecurityRequirement
    {
        {
            new OpenApiSecurityScheme
            {
                Reference = new OpenApiReference { Type = ReferenceType.SecurityScheme, Id = "oauth2" }
            },
            new[] { "openid" }
        }
    });
});

// 配置Swagger UI行为
app.UseSwaggerUI(options =>
{
    options.OAuthClientId("你的Keycloak客户端ID");
    options.OAuthClientSecret("你的Keycloak客户端密钥"); // 适配confidential类型客户端
    options.OAuthRealm("dc2-local");
    options.OAuthAppName("Swagger UI");
    options.OAuthUsePkce(); // 启用PKCE增强授权流程安全性
});

• 关键：启用OAuthUsePkce()后，Swagger UI会使用标准的授权码流程（而非AJAX请求）处理认证，从根源避免CORS冲突。

3. 确认ASP.NET Core中间件顺序

你的现有中间件顺序是正确的，保持如下顺序不变：

app.UseRouting();
app.UseCors(); // 必须在认证、授权中间件之前
app.UseAuthentication();
app.UseAuthorization();

验证步骤 #

1. 重启Keycloak服务和ASP.NET Core API
2. 打开Swagger UI，点击「Authorize」按钮选择对应权限并完成登录
3. 发起API请求，确认首次认证时不再触发CORS错误

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