Blazor Server集成YARP反向代理：静态文件（CSS/JS）加载失败（404）

针对你遇到的静态文件404和Blazor电路初始化失败问题，核心原因是YARP路由未覆盖Blazor核心通信路径、静态文件请求路径不匹配以及主应用与代理应用的Blazor请求冲突，以下是具体修复步骤：

1. 修正YARP路由配置，覆盖Blazor核心路径 #

Blazor Server依赖/_blazor（电路连接）和/_signalr（WebSocket通信）路径，必须确保这些请求能转发到目标代理应用，同时避免干扰主应用自身的Blazor功能。更新DynamicProxyConfigProvider.cs的路由配置：

// 原有静态文件/通用请求路由
routes.Add(new RouteConfig
{
    RouteId = $"{routeId}-static",
    ClusterId = clusterId,
    Match = new RouteMatch { Path = $"{proxiedUrl}/{{**catch-all}}" },
    Transforms = new List<Dictionary<string, string>>
    {
        new Dictionary<string, string> { { "PathRemovePrefix", proxiedUrl } }
    }
});

// 新增：转发Blazor电路请求（仅当请求来自代理页面时）
routes.Add(new RouteConfig
{
    RouteId = $"{routeId}-blazor",
    ClusterId = clusterId,
    Match = new RouteMatch { Path = "/_blazor" },
    Match.Conditions = new List<RouteCondition>
    {
        new RouteCondition
        {
            Name = "Header",
            Parameters = new Dictionary<string, string>
            {
                { "header", "Referer" },
                { "contains", proxiedUrl }
            }
        }
    }
});

// 新增：转发SignalR/WebSocket请求（仅当请求来自代理页面时）
routes.Add(new RouteConfig
{
    RouteId = $"{routeId}-signalr",
    ClusterId = clusterId,
    Match = new RouteMatch { Path = "/_signalr/{{**catch-all}}" },
    Match.Conditions = new List<RouteCondition>
    {
        new RouteCondition
        {
            Name = "Header",
            Parameters = new Dictionary<string, string>
            {
                { "header", "Referer" },
                { "contains", proxiedUrl }
            }
        }
    }
});

2. 调整中间件执行顺序 #

确保YARP优先处理路由请求，再交由主应用Blazor处理自身页面：

app.UseStaticFiles();
// YARP代理路由优先执行
app.MapReverseProxy();
// 主应用Blazor路由
app.MapRazorComponents<App>().AddInteractiveServerRenderMode();

3. 修正目标应用的静态文件引用 #

如果目标Blazor应用的静态文件、组件资源使用绝对路径（比如/css/site.css），会导致浏览器直接请求主应用的根路径（主应用无对应文件），需改为相对路径或设置base href：

方法1：改用相对路径 #

将目标应用_Host.cshtml中的静态文件引用改为相对路径：

<!-- 原绝对路径 -->
<link href="/css/site.css" rel="stylesheet" />
<!-- 修改为相对路径 -->
<link href="css/site.css" rel="stylesheet" />

方法2：设置base href #

在目标应用_Host.cshtml的<head>中添加base标签，确保资源请求基于当前页面路径：

<base href="~/"/>

4. 显式启用YARP WebSocket支持 #

在集群配置中明确开启WebSocket，确保Blazor电路连接正常：

clusters.Add(new ClusterConfig
{
    ClusterId = clusterId,
    Destinations = new Dictionary<string, DestinationConfig>
    {
        { "destination", new DestinationConfig { Address = item.Url } }
    },
    Metadata = new Dictionary<string, string>
    {
        { "WebSockets", "true" }
    }
});

5. 优化代理路径生成逻辑 #

避免使用Uri.EscapeDataString导致路径转义不匹配，直接用-替换空格即可：

// 去掉Uri.EscapeDataString，确保路径与YARP路由匹配
string sanitizedTitle = item.Title.Trim().Replace(" ", "-").ToLower(); 
string proxiedUrl = $"/system/{sanitizedTitle}-{item.Id}"; 

验证步骤 #

1. 启动主应用和目标Blazor应用
2. 跳转至代理路径（如/system/test-123）
3. 打开浏览器控制台，确认静态文件请求路径为/system/test-123/css/site.css且状态码为200
4. 检查/_blazor请求是否被转发到目标应用，WebSocket连接正常、电路初始化无报错

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