通过证书代理路由后Blazor应用On click点击事件失效问题排查

排查与解决步骤 #

Blazor Server的点击类交互完全依赖SignalR长连接实现，你描述的仅跳转链接可用、点击事件全失效的症状，是SignalR连接被Cloudflare代理拦截或校验失败导致的，可按以下步骤排查修复：

1. 验证SignalR连接状态

打开浏览器F12开发者工具：

• 切换到「控制台」标签，刷新页面后查看是否存在WebSocket连接失败、SignalR连接断开、Origin不匹配类报错
• 切换到「网络」标签，筛选WS类型请求，查看/_blazor开头的WebSocket请求是否完成101握手，有没有返回403、404等错误码

2. 配置AspNetCore转发头

Cloudflare作为反向代理会修改请求头，Blazor默认不信任代理转发的头信息，会导致SignalR来源校验失败。在项目Program.cs中添加以下配置：

// 放在var builder = WebApplication.CreateBuilder(args);之后，其他服务注册之前
builder.Services.Configure<ForwardedHeadersOptions>(options =>
{
    options.ForwardedHeaders = Microsoft.AspNetCore.HttpOverrides.ForwardedHeaders.All;
    // 生产环境建议替换为Cloudflare官方公开的IP段，测试可直接清空允许所有代理
    options.KnownProxies.Clear();
});

// 放在app.UseHttpsRedirection();之前，其他中间件注册之前
app.UseForwardedHeaders();

部署到Azure后，在应用服务的「配置」-「环境变量」中添加键ASPNETCORE_FORWARDEDHEADERS_ENABLED，值设为true，保存后重启应用。

3. 调整Cloudflare配置

• SSL/TLS加密模式调整：进入Cloudflare后台「SSL/TLS」-「概述」，将加密模式改为严格(Strict)，禁止使用灵活模式，避免前后端Scheme不一致触发安全校验。
• 关闭干扰性功能：进入「速度」-「优化」，关闭Rocket Loader、自动JS最小化、Mirage等会修改页面JS的功能，这类功能大概率会破坏Blazor框架的事件绑定逻辑。
• 配置Blazor专用路径规则：进入「规则」-「页面规则」，新建规则匹配*easyonlineresume.com/_blazor/*，添加以下规则项：
  • 缓存级别：旁路
  • 禁用WAF
  • 禁用所有性能优化
• 清空Cloudflare全站缓存后重新测试。

4. 校验CORS配置

如果项目中配置了CORS规则，将正式域名https://easyonlineresume.com添加到允许的Origin列表中，避免SignalR跨域校验拦截。

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