如何配置本地ASP.NET Core+React应用，让React通过相对URL调用API？

1. 开发环境：React代理转发 #

在React项目的package.json（通常位于ClientApp目录下）中添加代理配置，让React开发服务器自动将API请求转发到ASP.NET Core后端：

• 打开package.json，新增一行："proxy": "https://localhost:7276"
• 重启React开发服务器，此时调用/api/auth/login这类相对URL会自动映射到https://localhost:7276/api/auth/login

注意：如果后端使用HTTPS，需避免SSL证书错误。Windows下启动React时可执行：set NODE_TLS_REJECT_UNAUTHORIZED=0 && npm start；Mac/Linux下用：export NODE_TLS_REJECT_UNAUTHORIZED=0 && npm start

2. 前后端统一端口（BFF模式） #

如果要让前后端共用一个端口（符合你提到的BFF模式），可以修改ASP.NET Core配置，让它托管React静态文件并代理开发时的React请求：

调整Program.cs配置 #

确保Program.cs中包含静态文件和SPA中间件的正确配置：

var builder = WebApplication.CreateBuilder(args);

// 注册API服务
builder.Services.AddControllersWithViews();
// 配置SPA静态文件托管路径
builder.Services.AddSpaStaticFiles(config =>
{
    config.RootPath = "ClientApp/build";
});

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseSpaStaticFiles();

app.UseRouting();

app.MapControllers();

// 配置SPA中间件
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (app.Environment.IsDevelopment())
    {
        // 绑定React开发服务器端口，需和实际启动端口一致（5173）
        spa.UseReactDevelopmentServer(npmScript: "start");
    }
});

app.Run();

修改React启动脚本 #

在ClientApp/package.json中，将start脚本指定端口：

"start": "react-scripts start --port 5173"

配置完成后，启动ASP.NET Core应用即可：它会自动拉起React开发服务器，所有非API请求转发到React，API请求直接由后端处理。此时访问https://localhost:7276即可同时使用前端和API，React中用/api/auth/login这类相对URL就能直接调用后端接口。

3. 验证配置 #

启动应用后，在React组件中发起请求（比如fetch('/api/auth/login')），查看网络请求确认是否正确转发到ASP.NET Core后端。

内容的提问来源于stack exchange，提问作者Jakob Busk Sørensen