.NET 8 Minimal API已配置CORS，前端Fetch仍遇跨域错误求助

问题根源 #

你的.NET 8 Minimal API中中间件注册顺序错误，UseCors必须在UseRouting之后执行，否则CORS策略无法正确绑定到API端点上，导致前端请求时缺少Access-Control-Allow-Origin响应头。

修正后的API代码 #

调整中间件顺序，将UseRouting移到UseCors之前，同时修正几处逻辑错误：

using AUB_backend;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

// DbContext配置
builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseNpgsql(builder.Configuration.GetConnectionString("DefaultConnection")));

// CORS策略配置
builder.Services.AddCors(options => {
    options.AddPolicy("AllowSpecificOrigin", builder =>
    {
        builder.WithOrigins("http://localhost:3000")
            .AllowAnyMethod()
            .AllowAnyHeader();
    });
});

var app = builder.Build();

// 修正中间件顺序：先路由，再CORS
app.UseRouting();
app.UseCors("AllowSpecificOrigin");

// 默认页面
app.MapGet("/", () => "API Default Page");

// CRUD接口实现
// 创建单词
app.MapPost("/words", async(AppDbContext DbContext, Word newWord) => {
    DbContext.Words.Add(newWord);
    await DbContext.SaveChangesAsync();
    return Results.Created($"/words/{newWord.Id}", newWord);
});

// 获取所有单词
app.MapGet("/words", async(AppDbContext DbContext) => {
    var words = await DbContext.Words.ToListAsync();
    return Results.Ok(words);
});

// 根据ID获取单词
app.MapGet("/words/{id}", async(AppDbContext DbContext, int id) => {
    var word = await DbContext.Words.FindAsync(id);
    return word is not null ? Results.Ok(word) : Results.NotFound();
});

// 更新单词
app.MapPut("/words/{id}", async(AppDbContext DbContext, int id, Word updatedWord) => {
    var word = await DbContext.Words.FindAsync(id);
    if (word is null) return Results.NotFound();
    
    word.Term = updatedWord.Term;
    word.Definition = updatedWord.Definition;
    word.Example = updatedWord.Example;
    word.Tags = updatedWord.Tags;
    word.Language = updatedWord.Language;

    await DbContext.SaveChangesAsync();
    return Results.Ok(word);
});

// 删除单词（修正路径格式与逻辑错误）
app.MapDelete("/words/{id}", async(AppDbContext DbContext, int id) => {
    var word = await DbContext.Words.FindAsync(id);
    if (word is null) return Results.NotFound();

    DbContext.Words.Remove(word);
    await DbContext.SaveChangesAsync();
    return Results.NoContent();
});

app.Run();

额外修正说明 #

1. 路由格式修正：原Delete接口路径words/{id}缺少开头斜杠，改为/words/{id}确保路由匹配正确。
2. 错误逻辑修正：原Delete接口中，找不到对应ID时错误返回Results.Ok(word)，改为符合REST规范的Results.NotFound()。

验证步骤 #

重启API服务后，再次通过React组件调用接口，CORS错误应消失。若问题仍存在：

• 确认React应用确实运行在http://localhost:3000（端口号需完全匹配）
• 清除浏览器缓存，用无痕模式测试避免缓存干扰

内容的提问来源于stack exchange，提问作者Jibril