.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文档解释说 UseCors 中间件需要以正确的顺序调用。

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

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

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

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应用此策略。