对 Kong api 网关端点的基本身份验证请求出现 CORS 错误并且未找到预检

Posted 2023-03-04

【中文标题】对 Kong api 网关端点的基本身份验证请求出现 CORS 错误并且未找到预检

【英文标题】：Basic Auth request to a Kong api gateway endpoint gets CORS error and Preflight not found

【发布时间】：2021-11-12 15:33:06

【问题描述】：

我有一组微服务，在边缘，我有一个 API 网关（Kong 版本：_format_version：“1.1”（kong.yaml 文件）-kong 容器使用图像：“$KONG_DOCKER_TAG:-kong:2.3.3") 公开服务的路由（如来自客户端服务的基本身份验证 "/api/client/authenticate" )。我有一个基于 vuejs 的 Web 应用程序（前端），它通过 API Gateway (Kong) 与后端通信。

在我的网络应用程序（前端）中，我发出一个基本身份验证请求 (POST)，如下所示：

const headers =  
    'Authorization': 'Basic ' + window.btoa(this.username + ':' + this.password)
;
axios.post(process.env.VUE_APP_BACKEND_URL + '/api/client/authenticate', ,  headers )

但我得到 2 个错误：

网络标签：

控制台标签：

我的后端服务（如客户端服务，负责身份验证）基于 Spring Boot，并且我在所有控制器类中使用 @CrossOrigin 注解。我直接测试了对服务的请求（没有 API Gateway (Kong)），它按预期工作，那么问题是 API Gateway (Kong)。其他不需要身份验证标头的请求可以正常工作。

我的 kong.yaml 配置（这个问题的重要部分，服务和 CORS 插件配置）：

1 - 客户端服务，负责客户端身份验证，公开路由“/api/client/authenticate”：

2 - CORS 插件配置：

【参考方案1】：

这里的问题是 CORS 机制在每次请求之前，使用 http OPTIONS 方法进行预检请求。

据mozilla网站：

CORS 还依赖于一种机制，浏览器通过该机制向托管跨域资源的服务器发出“预检”请求，以检查服务器是否允许实际请求。在该预检中，浏览器发送指示 HTTP 方法的标头和将在实际请求中使用的标头。

[解决方案]

然后，为了解决这个问题，我们需要为每个路由公开 http OPTIONS 方法。然后，在每个路由的 API 网关配置文件 (kong.ymal) 中，我使用 http OPTIONS 方法和 没有插件和身份验证 创建了路由的副本（名为 route_name_preflight）如您所见（kong.yaml）：

重要的是要强调，正如我上面所说，我的后端微服务控制器类具有 @CrossOrigin 注释，这可能公开每个控制器请求的预检请求，这有必要。

在前端应用程序 (vuejs) 中，我开始使用 axios() 而不是 axios.method()，因为它更适合添加标头（例如使用 jwt 令牌进行授权）和其他东西：

const options = 
    url: process.env.VUE_APP_BACKEND_URL + '/api/client/authenticate',
    method: 'POST',
    headers: 
        'Accept': 'application/json',
        'Content-Type': 'application/json;charset=UTF-8',
        'Authorization': 'Basic ' + window.btoa(this.username + ':' + this.password),
    
;
await axios(options).then(...)