CORS 在 .NET 6.0 web api

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"));

和代码的rest

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

Answer 2

将此添加到我的 program.cs 文件中 .NET 6.0 web api

app.UseCors(options => options.AllowAnyOrigin());

Answer 3

如果您使用的是UseMiddleware ，则必须在它之前指定UseCors例如

var app = builder.Build();

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

app.UseMiddleware<ApiKeyMiddleware>();

Answer 4

您可能会阻止 IIS 中的选项 http 动词。检查 IIS 中请求过滤设置中的“HTTP 动词”选项卡。从下面的链接中删除突出显示的选项，如下图中所示。

IIS 请求过滤