如何配置并调试同端口运行的create-react-app与ASP.NET Core Web API

问题根源 #

你之前尝试让ASP.NET Core API和React dev server绑定同一端口，本质是两个进程抢占同一端口，这种方式本身就不稳定。刷新时请求会先到达API服务器，但API没有配置前端路由的 fallback 规则，因此返回404；关闭后端后，React dev server才真正接管端口，能正常处理路由。

正确的做法是让ASP.NET Core作为统一入口，通过反向代理处理React静态资源请求，同时自己处理API请求，这样既实现单端口访问，又解决路由和CORS问题。

开发环境配置步骤 #

1. 修改React项目端口

修改React的.env文件，将端口改为和API不冲突的数值（比如3000）：

PORT=3000

2. 配置ASP.NET Core反向代理与SPA路由

首先安装NuGet包：

Install-Package Microsoft.AspNetCore.SpaProxy

然后修改Program.cs，添加SPA相关配置：

var builder = WebApplication.CreateBuilder(args);

// 注册控制器服务
builder.Services.AddControllers();

// 配置SPA静态文件服务，指定React构建后的目录（根据你的项目结构调整路径）
builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "FE/build"; // 示例：React项目名为FE，build目录在FE下
});

var app = builder.Build();

// 开发环境启用异常页面
if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}

app.UseHttpsRedirection();
app.UseAuthorization();

// 映射API控制器路由
app.MapControllers();

// 启用SPA静态文件服务
app.UseSpaStaticFiles();

// 配置SPA代理与fallback路由
app.UseSpa(spa =>
{
    // 指定React项目根目录（根据你的项目结构调整）
    spa.Options.SourcePath = "FE";

    if (app.Environment.IsDevelopment())
    {
        // 自动启动React dev server并代理请求
        spa.UseReactDevelopmentServer(npmScript: "start");
        // 如果自动启动失败，手动指定代理地址：
        // spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
    }
});

app.Run();

3. 调整Visual Studio启动项

只需要将ASP.NET Core项目设为唯一启动项即可——它会自动启动React dev server，并将所有非API请求代理到React的3000端口。

生产环境配置步骤 #

1. 在React项目根目录执行构建命令：

npm run build

2. 将React的build文件夹内容复制到ASP.NET Core项目的wwwroot目录下（或你在AddSpaStaticFiles中指定的RootPath目录）。
3. 发布ASP.NET Core项目即可，此时ASP.NET Core会直接提供React静态资源，同时通过SPA fallback路由处理前端刷新的路由问题。

效果验证 #

• 访问http://localhost:7032会自动加载React应用
• React中使用相对路径（比如/api/xxx）调用API，无需CORS配置
• 刷新浏览器时，ASP.NET Core会将前端路由请求转发到React（开发环境）或直接返回对应静态资源（生产环境），不会出现404
• 本地其他设备可通过你的局域网IP访问（比如http://192.168.x.x:7032），无需额外配置

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