升级ASP.NET Core MVC后Blazor Hub无法跨页面连接的解决咨询

嘿，这个问题我之前帮好几个开发者踩过坑——本质上是Blazor Hub的脚本和端点路径用了相对路径导致的，当你导航到带控制器/动作的MVC路由时，相对路径会自动拼接当前路由前缀，直接导致WebSocket协商请求找错端点返回404。下面是一步步的修复方案，亲测有效：

举个例子：当你在首页/Home/Index时，相对路径的Blazor脚本会解析成/_framework/blazor.server.js，协商URL是/_blazor/negotiate，完全正常；但当你跳转到/Products/Detail时，相对路径会自动变成/Products/_framework/blazor.server.js，协商URL也跟着变成/Products/Detail/_blazor/negotiate——而你的Blazor Hub端点根本没配置在这个路径下，自然返回404。

1. 修正Blazor脚本的引用路径 #

把所有视图（尤其是_Layout.cshtml里）的Blazor脚本引用改成根相对路径（开头加/），确保无论当前路由是什么，都指向网站根目录的Blazor框架脚本：

<!-- 错误的相对路径（会随当前路由变化） -->
<script src="_framework/blazor.server.js"></script>

<!-- 正确的根相对路径（固定指向根目录） -->
<script src="/_framework/blazor.server.js"></script>

如果是在特定页面的局部视图里引用，同样要遵循这个规则。

2. 确保Startup.cs里的Blazor端点配置正确 #

在Configure方法中，要把MapBlazorHub的配置放在MVC路由之前，确保Blazor的端点优先匹配根路径的/_blazor请求：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 先加载静态文件、错误处理等基础中间件
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        // 优先配置Blazor Hub端点，确保它捕获所有/_blazor开头的请求
        endpoints.MapBlazorHub();
        // 再配置MVC的默认路由
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
    });
}

注意：MapBlazorHub默认的端点路径就是/_blazor，不要随意修改这个路径，否则还要同步修改脚本里的配置。

3. （可选）强制指定Blazor Hub的URL（兜底方案） #

如果上面两步还没解决问题，可以手动指定Blazor Hub的根路径，彻底规避相对路径的影响：

<script src="/_framework/blazor.server.js" autostart="false"></script>
<script>
    Blazor.start({
        configureSignalR: function (builder) {
            // 强制指定Hub的根路径
            builder.withUrl("/_blazor");
        }
    });
</script>

这个方法会完全忽略当前路由，直接连接根目录下的Blazor Hub端点。

• 确保你的ASP.NET Core 3.0项目使用了最新的补丁版本，避免早期版本中存在的Blazor路由兼容Bug；
• 如果项目用到了MVC区域（Areas），同样要确保所有Blazor相关的路径都是根相对路径，不要使用区域内的相对路径；
• 测试时记得清空浏览器缓存，避免旧的相对路径脚本被缓存导致问题。

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