ASP.NET Core使用UseFileServer嵌入SPA时子路由刷新404如何解决

修复方案 #

你原有配置存在分支管道注册错误、文件提供器未匹配、未过滤静态资源请求三个问题，可直接替换为以下扩展方法实现：

public static IApplicationBuilder UseSharedUI(this IApplicationBuilder app)
{
    // 复用同一个嵌入式文件提供器，避免重复初始化
    var uiFileProvider = new ManifestEmbeddedFileProvider(
        assembly: Assembly.GetAssembly(typeof(Builder)), 
        "UI/dist");

    // 原有静态资源服务逻辑不变
    app.UseFileServer(new FileServerOptions
    {
        RequestPath = "/shared-ui",
        FileProvider = uiFileProvider,
    });

    // 匹配SPA路由请求，做回退处理
    app.MapWhen(context => 
        // 匹配/shared-ui开头的路径
        context.Request.Path.StartsWithSegments("/shared-ui") 
        // 排除带后缀的静态资源（.js/.css/.png等）
        && !Path.HasExtension(context.Request.Path.Value)
        // 仅匹配页面请求，不影响同路径下的API接口
        && context.Request.Headers.Accept.Any(v => v.Contains("text/html")),
    appBuilder =>
    {
        appBuilder.Use(async (context, next) =>
        {
            // 重写请求路径为SPA入口文件，由前端处理路由
            context.Request.Path = "/shared-ui/index.html";
            await next();
        });

        // 用嵌入式文件提供器返回入口文件
        appBuilder.UseStaticFiles(new StaticFileOptions
        {
            RequestPath = "/shared-ui",
            FileProvider = uiFileProvider
        });
    });

    return app;
}

额外配置要求 #

• 前端SPA打包时必须配置基础路径为/shared-ui/：
  • Vue项目：在vue.config.js中配置publicPath: "/shared-ui/"
  • React项目：在package.json中新增"homepage": "/shared-ui"
  • Angular项目：在angular.json中配置build.options.baseHref = "/shared-ui/"
• 管道注册顺序要求：UseSharedUI必须放在UseRouting、API路由注册之前执行

原有配置错误说明 #

1. 分支管道内误用根应用app注册UseStaticFiles，而非分支构建器appBuilder，导致静态文件中间件注册到全局管道，分支逻辑失效
2. MapFallbackToFile默认使用Web根目录物理文件提供器，无法读取类库内嵌入的index.html
3. 未做静态资源过滤，会将静态资源请求也重定向到入口文件，导致资源加载失败

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