.Net Core 6 CORS违规错误求助:配置后仍无法解决
.NET Core 6 API对接React的CORS违规错误排查
使用.Net Core 6搭建的API对接React应用时遇到CORS违规错误,尝试多种方案未解决,请求排查遗漏配置,以下是Program.cs代码:
using Microsoft.EntityFrameworkCore; using Mellow.Data; var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddControllers(); // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle builder.Services.AddEndpointsApiExplorer(); builder.Services.AddSwaggerGen(); builder.Services.AddDbContext<MellowDbContext>(options => options.UseSqlServer( builder.Configuration.GetConnectionString("DefaultConnection"))); builder.Services.AddCors(options=> { options.AddPolicy("MyCORSPolicy",p => { p.WithOrigins("http://localhost:3000").AllowAnyMethod(); }); }); var app = builder.Build(); // Configure the HTTP request pipeline. if (app.Environment.IsDevelopment()) { app.UseSwagger(); app.UseSwaggerUI(); } app.UseHttpsRedirection(); app.UseRouting(); //app.UseMiddleware<AuthenticationMiddleware>(); app.UseCors("MyCORSPolicy"); app.UseAuthorization(); app.MapControllers(); app.Run();
排查及修复要点:
- CORS策略权限不全:当前策略仅允许指定源和任意方法,未覆盖请求头和凭据场景。React请求可能携带自定义头或凭据,需补充配置:
builder.Services.AddCors(options => { options.AddPolicy("MyCORSPolicy", p => { p.WithOrigins("http://localhost:3000") .AllowAnyMethod() .AllowAnyHeader() .AllowCredentials(); // 若React请求带Cookie等凭据则保留,否则可移除 }); }); - HTTPS重定向干扰:若React使用HTTP协议,API的
UseHttpsRedirection()会导致预检请求跳转失败。开发环境可暂时注释该行,或把React访问地址改为HTTPS。 - Origin严格匹配:确认React运行地址确实是
http://localhost:3000,CORS对Origin的匹配严格区分协议、域名、端口,避免用127.0.0.1代替localhost。 - 中间件顺序确认:
UseCors必须置于UseRouting之后、UseAuthorization之前,你的代码顺序符合要求,若后续启用认证中间件,需确保其在UseCors之后。 - 预检请求处理:PUT、DELETE或带自定义头的请求会触发OPTIONS预检,确保无自定义中间件拦截OPTIONS请求,.NET Core默认会自动处理此类请求。
内容的提问来源于stack exchange,提问作者Pholoso Mams
相关产品推荐
相关产品推荐

