Cors问题与.net应用程序和React尽管Cors配置

Question

我是第一次使用微软技术构建后端，我有麻烦让我的后端与我的前端(React)通信。来自Postman的HTTP请求是成功的，所以我怀疑这是构建的问题。我一直在遵循教程和Stackoverflow的解决方案，但我仍然得到以下消息:

控制台CORS阻塞错误

这是我的Program.cs文件，如果它能帮助别人找到我配置中的问题:

var myAllowSpecificOrigins = "_myAllowSpecificOrigins";
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
var Configuration = builder.Configuration;
builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddDbContext<BlogContext>(options =>
{
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
options.UseMySql(connectionString, ServerVersion.AutoDetect(connectionString));
});

builder.Services.AddCors(options =>
{
options.AddPolicy(name: myAllowSpecificOrigins,
builder =>
{
builder.WithOrigins("http://localhost:3000")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials();
});
}
);
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
.AddJwtBearer(options =>
{
options.TokenValidationParameters = new TokenValidationParameters
{
ValidateIssuer = false,
ValidateAudience = false,
ValidateLifetime = true,
ValidateIssuerSigningKey = true,
IssuerSigningKey = new SymmetricSecurityKey(
Encoding.UTF8.GetBytes(Configuration.GetValue<string>("JWTSecretKey"))
)
};
});
builder.Services.AddScoped<IUserRepository, UserRepository>();
builder.Services.AddSingleton<IAuthService>(
new AuthService(
Configuration.GetValue<string>("JWTSecretKey"),
Configuration.GetValue<int>("JWTLifespan")
)
);
builder.Services
.AddMvc().AddNewtonsoftJson(options =>
{
options.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
options.SerializerSettings.Converters.Add(new StringEnumConverter());
});


var app = builder.Build();
app.UseCors(myAllowSpecificOrigins);
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();

app.Run();

编辑

我试图允许所有的起源，得到以下错误(这是通过调用localhost:5090从客户端。对于localhost:7090，后端只是抛出一个网络连接错误。

从原点'http://localhost:3000'访问'http://localhost:5090/api/auth/login'的XMLHttpRequest已被CORS策略阻止:对预飞行请求的响应不通过访问控制检查:预飞行请求不允许重定向。

Answer 1

这可能是前端缺少代理设置。在不知道您的前端是如何配置的情况下，这只是我的猜测。关于如何设置，请参阅此处。

在我的经验中,我不得不通过setupProxy.js文件手动配置设置(包括指令也在上面的链接中)

Answer 2

我最终通过遵循微软最近关于该主题的文档(发布于06/03/2022)并进行小调整解决了这个问题。这是一个非常简单的解决方案，我希望它能帮助那些尝试过其他方法的人:

https://learn.microsoft.com/en us/aspnet/core/security/cors?view=aspnetcore - 6.0

我做了三个改变，使一切都不同了:

1。删除Program.cs中的这行代码:app. usehttpredirection ();

2。改变

builder =>
{
builder.WithOrigins("http://localhost:3000")

policy =>
{
policy.WithOrigins("http://localhost:3000")

3。在app.UseCors前添加这两行代码:

app.UseStaticFiles();
app.UseRouting();