React应用无法显示ASP.NET Core/EF Core数据库数据，CORS配置无效报401

先理清问题核心 #

你遇到的401是未授权错误，而常见的CORS跨域报错是浏览器提示No 'Access-Control-Allow-Origin' header，所以大概率不是单纯的CORS配置问题，按下面的步骤逐一排查：

1. 确认CORS中间件的执行顺序（关键） #

ASP.NET Core的中间件执行顺序严格，CORS必须放在路由和授权之前，否则配置不会生效。正确的Program.cs配置示例：

var builder = WebApplication.CreateBuilder(args);

// 1. 先注册CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactLocal", policy =>
    {
        policy.WithOrigins("http://localhost:3000") // 精确匹配前端地址
              .AllowAnyHeader()
              .AllowAnyMethod();
        // 如果需要携带Cookie/身份凭证，再加 .AllowCredentials()
    });
});

// 2. 注册Controllers等服务
builder.Services.AddControllers();

var app = builder.Build();

// 3. 先启用CORS，再执行路由、授权
app.UseCors("AllowReactLocal");

app.UseRouting();
app.UseAuthorization();

app.MapControllers();

app.Run();

2. 401错误的针对性排查 #

401是身份验证失败，和CORS无关，解决方向：

• 如果后端启用了身份验证（比如JWT、Cookie认证），前端fetch请求必须携带凭证：

// 前端fetch示例，添加credentials参数
fetch('http://localhost:5000/api/products', {
  method: 'GET',
  credentials: 'include' // 携带Cookie或Authorization头
})
.then(res => {
  if (!res.ok) throw new Error(res.statusText);
  return res.json();
})
.then(data => {
  // 这里写你的状态更新逻辑
})
.catch(err => console.error(err));

• 同时后端CORS策略要允许凭证，在配置里加上.AllowCredentials()，并且WithOrigins不能用通配符*，必须指定精确的前端地址。

3. 排查API路由是否存在（解决“页面找不到”） #

如果实际是404错误（可能你混淆了错误码），先直接在浏览器访问http://localhost:5000/api/products，看是否能返回数据：

• 检查后端Controller的路由特性：必须有[ApiController]和[Route("api/[controller]")]，比如：

[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
    [HttpGet] // 对应GET请求，路由就是/api/products
    public IActionResult GetAllProducts()
    {
        // 返回产品数据示例
        return Ok(new List<Product> { new Product { Id = 1, Name = "Test Product" } });
    }
}

• 确认Controller类名是ProductsController（路由里的[controller]会自动映射为products），如果是ProductController，路由会变成/api/product，前端请求就要对应修改。

4. 开发环境简化方案：React代理 #

如果不想纠结CORS配置，React开发环境可以用代理转发请求，避免跨域问题：
在package.json里添加一行：

"proxy": "http://localhost:5000"

然后前端请求直接写相对路径：

fetch('/api/products') // React会自动转发到http://localhost:5000/api/products
.then(/* ... */)

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