使用 Keycloak 的 .NET Core API 和 Angular 中前端后端 (BFF) 的 CORS 问题

Question

我正在尝试使用

Backend for Frontend (BFF)

和

.NET Core API

来实现

Angular app

架构。我正在使用的身份提供商是

Keycloak

。

当 Angular 应用程序启动时，它会向我的端点

HTTP GET

发出

api/auth/login

请求，其实现如下：

[HttpGet("login")]
public IActionResult Login()
{
    if (!User.Identity.IsAuthenticated)
    {
        return Challenge();
    }

    return Ok(new { message = "Authenticated user" });
}

当 Angular 应用程序调用

api/auth/login

端点时，我收到以下错误：

访问“http://localhost:8080/realms/xyz/protocol/openid-connect/auth?...”处的 XMLHttpRequest 来自来源 'https://localhost:44315/api/auth/login' 已被 CORS 策略阻止： 请求的资源上不存在“Access-Control-Allow-Origin”标头。

我的 .NET Core API 中当前的 CORS 配置：

services.AddCors(options =>
{
    options.AddPolicy("AllowAngularApp",
        builder => builder
            .WithOrigins("http://localhost:4200") 
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials());
});
app.UseCors("AllowAngularApp");

钥匙斗篷配置：

网络起源：

• https://localhost:44315
• http://localhost:4200

有效的重定向 URI：

• https://localhost:44315/*
• http://localhost:4200/*

如果我直接从浏览器调用

api/auth/login

端点，我会正确重定向到 Keycloak 登录页面，在这里我可以成功登录。登录完成后，我可以看到浏览器中设置的身份验证令牌和 cookie控制台。

我正在尝试实现的场景：Angular 应该调用 .NET Core API 端点，而该端点又应该将用户重定向到 Keycloak 登录页面。用户登录后，我应该设置身份验证 cookie，一切都应该无缝运行。

尽管进行了这些配置，我仍然收到 CORS 错误。我应该如何正确配置 .NET Core API 和 Keycloak 来实现 BFF 模式并解决这些 CORS 问题？

任何关于如何处理此设置或在这种情况下实施 BFF 的最佳实践的建议将不胜感激。

Answer 1

该错误是由于您将 HTTP 请求从 Javascript 重定向到您的身份提供商而引起的，这是不行的。 您的后端不应该重定向此类请求；应该有某种错误（如 401 状态代码）告诉前端实际上需要对用户进行身份验证。