.NET 6.0 Web api 中的 CORS

Posted 2023-03-31

【中文标题】.NET 6.0 Web api 中的 CORS

【英文标题】：CORS in .NET 6.0 web api

【发布时间】：2021-12-20 01:55:07

【问题描述】：

我有一个使用 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();

【问题讨论】：

什么意思不工作？

当我们在 Chrome 中加载 React APP 时，我们得到：CORS 错误和 404 预检。

你打错了UseCors 电话

***.com/questions/31942037/… 通过允许选项动词解决的问题。

【参考方案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 来应用此策略。

【讨论】：

谢谢。不知何故，代码在本地工作，但不能在现场工作（托管在 IIS 10 上）。服务器 / IIS 上是否有任何可能导致此问题的设置？ web.config 文件和本地一样。

***.com/questions/31942037/… 通过允许 OPTIONS 动词解决问题