ASP.NET Core如何让UseSpaStaticFiles对缺失静态文件返回404

问题背景 #

我有一个带客户端路由的ASP.NET Core单页应用（SPA），当前配置会对未知路径返回index.html，确保SPA能正常启动并渲染页面。但现在的问题是，当css、js、png这类静态资源不存在时，也会返回index.html，这给缓存带来了不少问题。我需要实现：静态资源文件不存在时返回404，其他路由默认返回index.html。

当前使用的静态文件与SPA服务代码：

app.UseSpaStaticFiles();
app.UseSpa(spa => { spa.Options.SourcePath = "ClientApp/src"; });

期望的请求处理结果：

• GET /fileDoesntExist.js -> 404
• GET /fileDoesntExist.css -> 404
• GET /fileDoesExist.css -> 200 fileDoesExist.css
• GET /aPage -> 200 index.html
• GET /someOtherPage -> 200 index.html

解决方案 #

要实现这个需求，需要调整请求管道的顺序，先针对静态资源做存在性检查，确认不存在时直接返回404，再处理SPA的 fallback 逻辑。具体修改如下：

修改Startup.cs的Configure方法 #

移除原有app.UseSpaStaticFiles()和app.UseSpa()调用，替换为以下逻辑：

using System.IO;
using System.Linq;
using Microsoft.AspNetCore.Http;
// 其他必要的using保留

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseSerilogRequestLogging(opts => {
        opts.EnrichDiagnosticContext = LogHelper.EnrichFromRequest;
        opts.GetLevel = LogHelper.ExcludeHealthChecks;
    });

    app.UseRouting();

    app.UseCors(builder => builder
        .AllowAnyHeader()
        .AllowAnyMethod()
        .SetIsOriginAllowed((host) => true)
        .AllowCredentials()
    );

    // 1. 优先处理存在的静态文件
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(env.ContentRootPath, "ClientApp/build")),
        RequestPath = ""
    });

    // 2. 检查静态资源是否存在，不存在则返回404
    app.Use(async (context, next) =>
    {
        var requestPath = context.Request.Path.Value;
        // 定义需要检查的静态资源后缀，可根据需求扩展
        var staticFileExtensions = new[] { ".js", ".css", ".png", ".jpg", ".jpeg", ".gif", ".ico", ".svg" };
        
        if (staticFileExtensions.Any(ext => requestPath.EndsWith(ext, StringComparison.OrdinalIgnoreCase)))
        {
            var filePath = Path.Combine(env.ContentRootPath, "ClientApp/build", requestPath.TrimStart('/'));
            if (!File.Exists(filePath))
            {
                context.Response.StatusCode = StatusCodes.Status404NotFound;
                return;
            }
        }
        await next();
    });

    // 3. 处理SPA路由，非静态资源路径返回index.html
    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp/src";
        spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
        {
            FileProvider = new PhysicalFileProvider(
                Path.Combine(env.ContentRootPath, "ClientApp/build"))
        };
    });

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapHealthChecks("/healthz",
            new HealthCheckOptions { Predicate = check => check.Tags.Contains("basic") });
    });
}

逻辑说明 #

1. 静态文件优先返回：通过UseStaticFiles直接映射SPA构建目录，确保存在的静态资源能正常返回200。
2. 静态资源缺失拦截：自定义中间件判断请求路径是否为静态资源后缀，若对应文件不存在则直接返回404，不进入SPA fallback流程。
3. SPA路由 fallback：仅当请求不是静态资源，或静态资源存在时，才触发SPA的默认页面逻辑，返回index.html供客户端路由处理。

注意事项 #

• 确认ClientApp/build是你的SPA实际构建产物目录，若路径不同需对应修改。
• 可根据项目需求扩展staticFileExtensions数组，添加更多需要检查的静态资源后缀。

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