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

Question

我有一套微服务，在边缘，我有一个API网关（Kong 版本：_format_version：“1.1”（ kong.yaml 文件）- kong 容器使用图像：“${KONG_DOCKER_TAG:-kong:2.3.3}”）公开服务的路由（如来自客户端服务的基本身份验证 "/api/client/authenticate"）。我有一个基于 vuejs 的 Web 应用程序（前端），它通过 API 网关（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 网关（Kong））并且它按预期工作，那么问题是 API 网关（Kong）。其他不需要身份验证的请求 headers 正常工作。

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

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

2 - CORS 插件配置：

Answer 1

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

根据 mozilla 网站：

CORS also relies on a mechanism by which browsers make a "preflight" request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.

[解决方案]

然后，要解决这个问题，我们需要为每个路由公开 http OPTIONS 方法。然后，在 API 网关配置文件 (kong.ymal) 中，我为每个路由创建了一个路由副本（名为 route_name_preflight），其中包含 http OPTIONS方法和 没有插件和身份验证 正如您在下面看到的 (kong.yaml):

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

在前端应用程序 (vuejs) 中，我开始使用 axios() 而不是 axios.method()，因为添加 headers 更好（f.e。使用 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(...)

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

Basic Auth request to a Kong api gateway endpoint gets CORS error and Preflight not found

spring-boot

vue.js

cors

kong