如何让ASP.NET Core React模板中不存在的静态文件请求返回404？

这个问题我之前也碰到过！默认的ASP.NET Core React模板里，UseSpa中间件会把所有没被前面中间件处理的请求都转发到index.html——包括那些不存在的静态文件请求，所以才会返回200状态码的SPA回退页面，而不是404。

要解决这个问题，我们需要在SPA中间件之前加一层自定义拦截逻辑：判断请求是不是指向静态文件，如果是但文件不存在，直接返回404，不让请求走到SPA中间件。

下面是具体的实现步骤，分两种项目结构说明：

解决方案1：.NET 6+ 顶级别语句（Program.cs） #

在UseSpa()调用之前，添加自定义中间件：

var builder = WebApplication.CreateBuilder(args);

// 添加所需服务
builder.Services.AddControllersWithViews();
builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/build";
});

var app = builder.Build();
var env = app.Environment;

// ...其他基础中间件配置（UseHttpsRedirection、UseStaticFiles等）...

// 自定义中间件：拦截不存在的静态文件请求
app.Use(async (context, next) =>
{
    // 定义需要拦截的静态文件扩展名，可根据实际需求调整
    var staticFileExtensions = new[] { ".js", ".css", ".png", ".jpg", ".jpeg", ".gif", ".svg", ".ico", ".woff", ".woff2" };
    var requestPath = context.Request.Path.Value;

    // 检查当前请求是否为静态文件类型
    if (staticFileExtensions.Any(ext => requestPath.EndsWith(ext, StringComparison.OrdinalIgnoreCase)))
    {
        // 获取React打包后的静态文件根目录
        var staticFileRoot = Path.Combine(env.ContentRootPath, "ClientApp/build");
        var fileProvider = new PhysicalFileProvider(staticFileRoot);
        // 获取请求对应的文件信息
        var fileInfo = fileProvider.GetFileInfo(requestPath.TrimStart('/'));

        // 如果文件不存在，直接返回404
        if (!fileInfo.Exists)
        {
            context.Response.StatusCode = StatusCodes.Status404NotFound;
            return;
        }
    }

    // 否则继续执行后续中间件
    await next();
});

// 最后配置SPA中间件
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    if (env.IsDevelopment())
    {
        spa.UseReactDevelopmentServer(npmScript: "start");
    }
});

app.Run();

解决方案2：传统Startup.cs 结构 #

如果你的项目用的是老版本的Startup.cs，在Configure方法里把自定义中间件放在UseSpa()之前：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...其他基础中间件配置（UseHttpsRedirection、UseStaticFiles等）...

    // 自定义中间件：拦截不存在的静态文件请求
    app.Use(async (context, next) =>
    {
        var staticFileExtensions = new[] { ".js", ".css", ".png", ".jpg", ".jpeg", ".gif", ".svg", ".ico", ".woff", ".woff2" };
        var requestPath = context.Request.Path.Value;

        if (staticFileExtensions.Any(ext => requestPath.EndsWith(ext, StringComparison.OrdinalIgnoreCase)))
        {
            var staticFileRoot = Path.Combine(env.ContentRootPath, "ClientApp/build");
            var fileProvider = new PhysicalFileProvider(staticFileRoot);
            var fileInfo = fileProvider.GetFileInfo(requestPath.TrimStart('/'));

            if (!fileInfo.Exists)
            {
                context.Response.StatusCode = StatusCodes.Status404NotFound;
                return;
            }
        }

        await next();
    });

    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";
        if (env.IsDevelopment())
        {
            spa.UseReactDevelopmentServer(npmScript: "start");
        }
    });
}

为什么这样有效？ #

默认情况下，UseStaticFiles和UseSpaStaticFiles只会处理存在的静态文件，当请求的文件不存在时，它们会把请求传递给下一个中间件。而UseSpa中间件的默认行为是捕获所有未处理的请求，返回index.html（状态码200）。

我们添加的自定义中间件，会在请求到达UseSpa之前，先检查它是不是静态文件请求，且对应的物理文件不存在——如果是，就直接返回404，阻止请求进入SPA回退逻辑。

你可以根据自己的需求调整staticFileExtensions数组，添加或移除需要拦截的文件类型；如果你的静态文件都在特定前缀下（比如/static/），也可以改成检查路径前缀的方式，这样更精准。

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