使用API​​网关进行身份验证时，如何解决Keycloak CORS Access-Control-Allow-Origin丢失的问题

Question

我创建了一个小型的gitlab项目，以调查使用lua-resty-openidc作为网关对API请求进行身份验证，然后再向上游发送以访问后端Flask API服务的受保护资源。

Keycloak用于使用OpenID机密客户端秘密配置通过网关进行身份验证。网关在HTTP Only Cookie中返回身份和访问令牌。 API和客户端在同一管理域内。

总的来说，工作流程是：

                     Keycloak
                        ^
                        |
                        |
Angular Client <---> Gateway <---> Flask API 

出于here所述的原因，正在遵循使用服务器端组件来处理认证代码的方法。出于此article和here中列出的原因，仅使用HTTP cookie来将访问令牌存储在本地存储中。

文章解释了为什么我决定不将身份验证代码流的传统模型与PKCE或隐式流一起使用的其他原因：

• An Alternative Way To Secure SPA'S With ASP.NET Core OpenID Connect OAUTH 2.0 and ProxyKit

• The State Of The Implicit Flow In OAuth2

• Cheat Sheet OAuth For Browser Based Applications

自然地，它取决于应用程序的性质和安全性要求，如here所述。根据我的要求，对于SPA而言，使用服务器端组件/渲染比传统的oauth2流更可取。

当网关重定向到Keycloak登录页面时，客户端会收到有关缺少Access-Control-Allow-Origin的CORS跨源错误，即

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://keycloak.example.com:8080/auth/realms/acme/protocol/openid-connect/auth?response_type=code&client_id=acme&state=da75bec9f6099c3d5be8f0aebd3a6a82&redirect_uri=http%3A%2F%2Fgateway.example.com%2Fapi%2Fredirect_uri&nonce=f0d61a23ff1408929846903c1701741c&scope=openid%20email%20profile. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

在阅读有关此问题的其他文章时，我认为问题在于Keycloak在收到重定向请求时未添加 Access-Control-Allow-Origin 标头？也许这仅由Keycloak javascript适配器完成？但是，在这种体系结构中，Keycloak的客户端是使用lua-resty-openidc实现的API网关。

该项目的源代码可从gitlab获得。但是，配置摘要如下：

钥匙斗篷

• 根网址：http://www.gateway.com
• 重定向Uri的：/ api / redirect_uri
• 网站起源：*

网关服务器

• 在将上游发送到Flask API之前，位置/ api通过Keycloak验证/ api / *客户端请求。在此位置中，添加了以下CORS标头：

if ($request_method = OPTIONS) {
        add_header "Access-Control-Allow-Origin" "*";
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD, DELETE";
        add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
        return 200;
      }

if ($request_method = 'GET') {
    add_header "Access-Control-Allow-Origin" "*";
    add_header "Access-Control-Allow-Credentials" "true";
    add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD, DELETE";
    add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
}

• Keycloak配置详细信息（包括客户端，秘密和重定向URL）存储在网关服务器上。

出于here所述的原因，正在遵循使用服务器端组件来处理认证代码的方法。出于此article和here中列出的原因，仅使用HTTP cookie来将访问令牌存储在本地存储中。

Angular客户端

以下代码向网关发出请求：

let headers = new HttpHeaders({'Content-Type': 'text/html', 'Accept': 'text/html'});

this.http.get("/api/protected", { headers: headers, responseType: 'text', withCredentials: true } )
.subscribe(response => this.response = response);

我正在为客户端使用以下代理配置：

{
  "/api/*": {
    "target": "http://gateway.example.com",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

是否有人有解决此问题的经验，或者是否有通过服务器中间件为angular提供身份验证的经验？

更新 article中建议的方法使用ASP.NET Core通过 samesite cookie提供身份验证和会话管理。它还充当私有.NET API后端的反向代理，并提供静态内容。使用Flask API作为私有后端和Angular 8前端，为开发环境中的研究构建了here的改编版。

现在没有CORS Access-Control-Allow-Origin错误。也许这些错误的原因是由于docker-compose环境的配置不正确？