如何使用 swagger UI 和解决方法选项预检问题 (CORS) 设置 ClientCredentials 流

Question

我有一个使用 swagger 库的 asp.net 核心应用程序

<PackageReference Include="Swashbuckle.AspNetCore" Version="5.6.3" />

我希望允许使用 /swagger 网页的 api 开发人员能够使用“ClientCredentials”流获取令牌。我已尝试以下操作，但遇到选项预检问题

        c.AddSecurityDefinition("oauth2", new OpenApiSecurityScheme
        {
            Type = SecuritySchemeType.OAuth2,
            Flows = new OpenApiOAuthFlows
            {
                ClientCredentials = new OpenApiOAuthFlow
                {
                    TokenUrl = new Uri(baseAuthURL + "/oauth2/v2.0/token"),
                    Scopes = new Dictionary<string, string>
                    {
                        { "ABC/.default", "Access read operations" }
                    },
                    AuthorizationUrl = new Uri(baseAuthURL + "/oauth2/authorize")
                }
            }
        });

当我点击授权时

查看控制台后，这是我看到的

从源 'https://localhost:44312' 访问 'https://login.microsoftonline.com/ABCD/oauth2/v2.0/token' 已被 CORS 策略阻止：没有 'Access-Control-Allow -Origin' 标头存在于请求的资源上。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

我该如何解决这个问题？要解决此问题，究竟需要对“AddSecurityDefinition”进行哪些更改？这是我什至能够解决的问题吗？（假设身份提供者可以支持选项预检请求）

是创建反向代理的唯一解决方法吗？

如何扩展上面的代码以在请求中发送自定义 HTTP 请求标头？

我在网上搜索了几个小时，其中有人成功使用 ClientCredentials 流在 swaggerUI 中获取 oauth 令牌。

更新 1： 非常奇怪的是，即使选项预检请求正在接收带有标题 access-control-allow-origin 的响应：* 如果我使用 chrome 扩展将此值覆盖为完全相同的值，它可以解决问题。它显然不是解决方案，而是更多的观察。将值设置为完全相同的值以某种方式改变结果是非常奇怪的。

以下是响应标头的差异。左侧没有任何镀铬扩展，右侧镀铬扩展覆盖到完全相同的值。你可以看到没有区别。那么为什么浏览器会以不同的方式对待它呢？

我还尝试使用 AWS API Gateway 添加授权 api 代理，您可以看到下面设置的响应标头。这也不起作用。

Answer 1

将其添加到 Startup 中的服务配置中：

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("AnyOrigin", builder =>
        {
            builder =>                              
                builder.WithOrigins("https://login.microsoftonline.com")
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .AllowCredentials());
        });
    });
}

然后这是您的应用程序配置：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env
{
    // after routing / mvc
    app.UseCors("AnyOrigin");
}

请注意，您正在发送一个授权标头，因此是一个凭据请求，并且会转换为 Access-Control-Allow-Credentials CORS 标头。端点需要返回 200 OK，这应该可以工作。

有关与 SwaggerUI 相关的更多帮助，以下是有用的资源：https://swagger.io/docs/open-source-tools/swagger-ui/usage/cors/