调用 ASP.net Core Webapi 的 API Endpoint 时获取 CORS 策略预检请求标头错误

Question

我已经阅读 stackoverflow 的帖子很多年了，它们总是帮助我解决很多问题。非常感谢大家。 现在我找不到对我的问题有帮助的答案，所以这是一个注册的好机会:-)

我的问题： 我有一个 ASP.net Core WebApi 来授权和验证用户（.net 7）。当使用我的 Angular 应用程序调用该 API 的登录端点时，我遇到了 CORS 问题：

Access to fetch at 'https://myAPI.azurewebsites.net/accounts/authenticate' from origin 'https://myAPP.azurewebsites.net' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

当我使用 Postman 调用端点时，一切都很好，并且我得到了预期的响应。我在前端的登录方法很简单：

  login(email: string, password: string) {
        return this.http.post<any>(`${baseUrl}/authenticate`, { email, password }, { withCredentials: true })
            .pipe(map(account => {
                this.accountSubject.next(account);
                this.startRefreshTokenTimer();
                return account;
            }));
    }

Program.cs 如下所示：

var builder = WebApplication.CreateBuilder(args);

// add services to DI container
{
    var services = builder.Services;
    var env = builder.Environment;

    services.AddDbContext<DataContext>();
    services.AddCors();
    services.AddControllers().AddJsonOptions(x => 
    {
        // serialize enums as strings in api responses (e.g. Role)
        x.JsonSerializerOptions.Converters.Add(new JsonStringEnumConverter());
    });

    services.AddAutoMapper(AppDomain.CurrentDomain.GetAssemblies());
    services.AddSwaggerGen();

    // configure strongly typed settings object
    services.Configure<AppSettings>(builder.Configuration.GetSection("AppSettings"));

    // configure DI for application services
    services.AddScoped<IJwtUtils, JwtUtils>();
    services.AddScoped<IAccountService, AccountService>();
    services.AddScoped<IMailService, EmailService>();
 builder.Services.Configure<MailSettings(builder.Configuration.GetSection(nameof(MailSettings)));
    
}

var app = builder.Build();

// migrate any database changes on startup (includes initial db creation)
using (var scope = app.Services.CreateScope())
{
    var dataContext = scope.ServiceProvider.GetRequiredService<DataContext>();    
    dataContext.Database.Migrate();
}

app.UseHttpsRedirection();

app.UseSwagger();
app.UseSwaggerUI(x => x.SwaggerEndpoint("/swagger/v1/swagger.json", ".NET Sign-up and Verification API"));

app.UseCors(x => x
   .SetIsOriginAllowed(origin => true)
   .AllowAnyMethod()
   .AllowAnyHeader()
   .AllowCredentials());

// global error handler
app.UseMiddleware<ErrorHandlerMiddleware>();

// custom jwt auth middleware
app.UseMiddleware<JwtMiddleware>();

app.MapControllers();

app.Run(builder.Configuration["AppSettings:origins"]);

结果就是如上所示的 CORS 策略错误消息。 我还尝试设置自己的自定义 CORS 策略：

.
.
.
// global cors policy
app.UseCors(
        policy =>
        {
            policy.WithOrigins
                ("http://localhost:8100",
                "https://myAPP.azurewebsites.net",
                "https://API1.azurewebsites.net",
                "https://API2.azurewebsites.net",
                "https://www.myDomain.de")
                .SetIsOriginAllowedToAllowWildcardSubdomains()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials()
                .WithMethods("GET", "PUT", "POST", "DELETE", "OPTIONS");
        }
    );
.
.
.

结果是一样的。我尝试了一些不同的设置，并在 stackoverflow 上阅读了很多内容，但我感觉有点卡住了，所以非常感谢每一个帮助:-)

参见上面的描述。

Answer 1

因此，经过大量阅读后，我找到了解决问题的方法。问题实际上出在 Azure Web App 的配置中。 有一个选项可以设置 CORS 配置，我很久以前就这样做了。我将原点设置为 * 并且没有检查那里的 Access-Control-Allow-Credentials 选项。 我只是忘记了我在那里所做的更改。

Azure Web 应用程序配置

希望这可以帮助那里的人。

谢谢冯瑞凯。你的回答最终让我找到了解决方案。

Answer 2

该错误表明您同时设置了响应头，这是不允许的：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *

您可以查看这个相关的文档。

从你的代码来看，响应头

Access-Control-Allow-Origin: *

不是由Cors中间件设置的。您需要检查它是否设置在其他地方。