集成Duende BFF后部署的ASP.NET Core Web应用出现404错误

我在ASP.NET Core 8 Web应用（搭配React+Vite单页应用）中参考Duende BFF React示例项目进行集成，本地开发环境运行正常，但部署到文件夹后首页出现HTTP 404错误。

Program.cs中的代码修改 #

builder.Services.AddBff();
builder.Services.AddAuthentication(options =>
{
    options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
    options.DefaultSignOutScheme = OpenIdConnectDefaults.AuthenticationScheme;
}).AddCookie(CookieAuthenticationDefaults.AuthenticationScheme, options =>
{
    //strict SameSite Handling
    options.Cookie.SameSite = Microsoft.AspNetCore.Http.SameSiteMode.Strict;
    options.Cookie.Name = "__dmmService-bff";
}).AddOpenIdConnect(OpenIdConnectDefaults.AuthenticationScheme, options =>
{
    options.Authority = iamAuthConfig.Authority;
    options.ClientId = iamAuthConfig.ClientId;
    options.ClientSecret = iamAuthConfig.ClientSecret;
    options.ResponseType = OpenIdConnectResponseType.Code;
    options.ResponseMode = OpenIdConnectResponseMode.Query;

    options.GetClaimsFromUserInfoEndpoint = true;
    options.MapInboundClaims = false;
    options.SaveTokens = true;
    options.DisableTelemetry = true;

    options.Scope.Clear();
    foreach (var scope in iamAuthConfig.Scopes.Split(" "))
    {
        options.Scope.Add(scope);
    }

    options.TokenValidationParameters = new()
    {
        NameClaimType = "name",
        RoleClaimType = "role"
    };
}).AddJwtBearer(JwtBearerDefaults.AuthenticationScheme, options =>
{
    options.SaveToken = true;
})
builder.Services.AddAuthorizationBuilder().AddPolicy(....);
if (environment.IsDevelopment())
{
    app.UseDefaultFiles();
    app.UseStaticFiles();
}
//it was already there
app.UseRouting();
app.UseAuthentication();
//new added
app.UseBff();
//it was already there
app.UseAuthorization();
//new added
app.MapBffManagementEndpoints();

app.UseEndpoints(endpoints =>
{
    endpoints.MapDefaultControllerRoute().RequireAuthorization();
});
app.MapFallbackToFile("/index.html");

问题原因及解决方案 #

核心问题 #

代码中仅在开发环境启用了UseDefaultFiles和UseStaticFiles中间件，部署到生产环境后无法加载React编译后的静态资源（包括index.html），直接导致404错误。

修复步骤 #

1. 移除静态文件中间件的环境限制：把UseDefaultFiles和UseStaticFiles移到环境判断逻辑外，确保生产环境也能加载静态资源，且UseDefaultFiles必须在UseStaticFiles之前调用。
2. 调整中间件顺序：静态文件相关中间件要放在UseRouting之前，避免路由优先拦截请求。
3. 验证静态资源路径：确认React编译后的文件（index.html、js、css等）已正确部署到ASP.NET应用的wwwroot目录（默认静态文件目录）。

修改后的关键代码 #

// 移除环境判断，确保生产环境也能加载静态文件
app.UseDefaultFiles();
app.UseStaticFiles();

//it was already there
app.UseRouting();
app.UseAuthentication();
//new added
app.UseBff();
//it was already there
app.UseAuthorization();
//new added
app.MapBffManagementEndpoints();

app.UseEndpoints(endpoints =>
{
    endpoints.MapDefaultControllerRoute().RequireAuthorization();
});
app.MapFallbackToFile("/index.html");

额外检查项 #

• 若使用IIS部署，确认站点物理路径指向ASP.NET应用的发布目录，且IIS用户对该目录有读取权限。
• 确保MapFallbackToFile("/index.html")在所有路由配置的最后，保证非API/BFF请求都能 fallback 到React入口文件。

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