.NET 6.0 Web api 中的 CORS

Question

我有一个使用 Axios 调用 .NET 6 Web API 的 React 应用程序。

在 program.cs 文件中，我添加了 builder.Services.AddCors 和 app.UseCors，如下所示。

但我仍然收到 CORS 错误和 404 预检。

用于在 .NET 5 Web Api 中工作的方法。

我们需要为 .NET 6 Web Api 设置什么吗？

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.EntityFrameworkCore;
using Microsoft.OpenApi.Models;
<removed>

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddCors();

// Add services to the container.
<removed>

// App settings
<removed>

<removed>

builder.Services.AddHttpContextAccessor();

builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.Converters.Add(new DateTimeConverter());
    });

// AutoMapper
builder.Services.AddAutoMapper(AppDomain.CurrentDomain.GetAssemblies());

// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();

<removed>

// Firebase
<removed>

var app = builder.Build();

CORS 注册是

app.UseCors(x => x.AllowAnyHeader()
      .AllowAnyMethod()
      .WithOrigins("https://our-react-site.com"));

还有剩下的代码

// Configure the HTTP request pipeline. 
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseSwagger();
app.UseSwaggerUI();

app.UseHttpsRedirection();

app.UseAuthentication();

app.UseAuthorization();

app.MapControllers();

app.Run();

Answer 1

CORS docs 解释说 UseCors 中间件需要以正确的顺序调用。

必须以正确的顺序调用 UseCors。有关详细信息，请参阅Middleware order。例如，在使用 UseResponseCaching 时，必须在 UseResponseCaching 之前调用 UseCors。

Middleware Order部分显示UseCors需要在重定向和路由之后、身份验证和授权之前调用。

在您的代码中，您必须在UseHttpsRedirection 之后和UseAuthentication 之前调用UseCors：

app.UseHttpsRedirection();


app.UseCors(x => x.AllowAnyHeader()
      .AllowAnyMethod()
      .WithOrigins("https://our-react-site.com"));

app.UseAuthentication();

文档示例显示了这一点：

var  MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
                      builder =>
                      {
                          builder.WithOrigins("http://example.com",
                                              "http://www.contoso.com");
                      });
});

// services.AddResponseCaching();

builder.Services.AddControllers();

var app = builder.Build();
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

app.UseCors(MyAllowSpecificOrigins);

app.UseAuthorization();

app.MapControllers();

app.Run();

另一个区别是文档示例创建了至少一个命名策略并使用UseCors 来应用此策略。