对Kong api网关端点的基本Auth请求获取CORS错误和未找到的预飞

Question

我有一组微型服务，在边缘，我有一个API网关(Kong 版本：_format_version："1.1" (kong.yaml文件)- kong容器使用映像:公开服务路由的)(比如客户机服务中的基本auth )。我有一个基于vuejs的web应用程序(前端)，它与API网关(Kong)的后端结合在一起。

在我的web应用程序(前端)中，我提出了一个基本的八月请求(POST)，就像这样：

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

但我有两个错误：

网络选项卡：

​

控制台选项卡：

​

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

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

1-负责暴露路由“/api//”的客户端的客户机服务：

​

​

2- CORS插件配置：

​

​

Answer 1

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

根据莫兹拉网站：

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

溶液

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

​

​

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

在前端应用程序(vuejs)中，我开始使用axios()而不是axios.method()，因为添加标题(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(...)