Blazor Server部署至Ubuntu VPS HTTPS环境后组件无法交互求助

问题描述 #

• 本地及测试环境运行正常，部署到HTTPS配置的VPS后，所有Razor组件完全无法交互
• Firefox控制台显示WebSocket已成功建立连接，但触发组件交互时无任何数据发送，仅心跳包正常维持连接
• 基于全新Blazor Server项目，严格遵循官方部署指南操作后，问题仍未解决

环境信息 #

• VPS系统：Ubuntu 22.04.1 LTS
• Web服务器：Apache2（曾尝试Nginx，问题一致）
• SSL证书：Cloudflare提供，证书及密钥均有效且未过期

当前Apache虚拟主机配置 #

<VirtualHost *:*>
    RequestHeader set "X-Forwarded-Proto" expr=%{REQUEST_SCHEME}
</VirtualHost>

<VirtualHost *:443>
        ServerName              <serverName>

        Protocols               h2 http/1.1

        ProxyRequests           On
        ProxyPreserveHost       On
        ProxyPassMatch          ^/_blazor/(.*) http://localhost:5000/_blazor/$1
        ProxyPass               /_blazor ws://localhost:5000/_blazor
        ProxyPass               / http://localhost:5000/
        ProxyPassReverse        / http://localhost:5000/

        ErrorLog                ${APACHE_LOG_DIR}/error.log
        CustomLog               ${APACHE_LOG_DIR}/access.log combined

        SSLEngine               on
        SSLProtocol             all -SSLv3 -TLSv1 -TLSv1.1
        SSLHonorCipherOrder     off
        SSLCompression          off
        SSLSessionTickets       on
        SSLUseStapling          off
        SSLCertificateFile      /home/cf.pem
        SSLCertificateKeyFile   /home/cf.key
        SSLCipherSuite          ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305
</VirtualHost>

Blazor Server主程序代码 #

public static void Main(string[] args)
{
    var builder = WebApplication.CreateBuilder(args);

    // Add services to the container.
    builder.Services.AddRazorPages();
    builder.Services.AddServerSideBlazor();
    builder.Services.AddSingleton<WeatherForecastService>();

    //builder.WebHost.ConfigureKestrel(options =>
    //{
    //    options.ConfigureHttpsDefaults(options =>
    //    {
    //        var pem = File.ReadAllText(builder.Configuration["PemPath"]).Trim();
    //        var key = File.ReadAllText(builder.Configuration["KeyPath"]).Trim();
    //        var crt = X509Certificate2.CreateFromPem(pem, key);

    //        options.ServerCertificate = crt;
    //    });
    //});

    var app = builder.Build();

    // Configure the HTTP request pipeline.
    if (!app.Environment.IsDevelopment())
    {
        app.UseExceptionHandler("/Error");
    }

    app.UseForwardedHeaders(new() { ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto });
    app.UseAuthentication();

    app.UseHsts();
    app.UseHttpsRedirection();

    app.UseStaticFiles();

    app.UseRouting();

    app.MapBlazorHub();
    app.MapFallbackToPage("/_Host");

    app.Run();
}

确认状态 #

HTTPS可正常访问网站，SSL连接验证通过，但所有组件交互操作无响应

解决思路及操作建议 #

1. 调整ForwardedHeaders配置 #

确保转发头配置覆盖必要规则，在Program.cs中修改：

app.UseForwardedHeaders(new ForwardedHeadersOptions
{
    ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto,
    RequireHeaderSymmetry = false,
    ForwardLimit = null
});

同时在appsettings.json添加信任配置：

"ForwardedHeadersOptions": {
    "AllowedHosts": ["你的域名"]
}

2. 修正Apache代理配置 #

• 移除ProxyRequests On（反向代理无需开启正向代理功能）
• 调整代理规则顺序，WebSocket规则优先于普通HTTP规则：

<VirtualHost *:443>
    ServerName 你的域名

    Protocols h2 http/1.1

    ProxyPreserveHost On
    ProxyPass /_blazor ws://localhost:5000/_blazor
    ProxyPassReverse /_blazor ws://localhost:5000/_blazor
    ProxyPass / http://localhost:5000/
    ProxyPassReverse / http://localhost:5000/

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    SSLEngine on
    SSLProtocol all -SSLv3 -TLSv1 -TLSv1.1
    SSLHonorCipherOrder off
    SSLCompression off
    SSLSessionTickets on
    SSLUseStapling off
    SSLCertificateFile /home/cf.pem
    SSLCertificateKeyFile /home/cf.key
    SSLCipherSuite ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305
</VirtualHost>

• 确认Apache启用必要模块：

sudo a2enmod proxy proxy_http proxy_wstunnel headers
sudo systemctl restart apache2

3. 检查Cloudflare配置 #

• 将SSL模式设置为Full或Full (strict)，避免使用Flexible模式（该模式会导致客户端到Cloudflare为HTTPS，Cloudflare到VPS为HTTP，引发WebSocket协议不匹配）
• 禁用Cloudflare的Rocket Loader功能，该功能可能干扰Blazor的WebSocket连接

4. 锁定Kestrel监听范围 #

在appsettings.json中配置Kestrel仅监听本地端口，避免直接暴露公网：

"Kestrel": {
    "Endpoints": {
        "Http": {
            "Url": "http://localhost:5000"
        }
    }
}

5. 排查详细日志 #

• 在appsettings.json开启Blazor SignalR详细日志：

"Logging": {
    "LogLevel": {
        "Microsoft.AspNetCore.SignalR": "Debug",
        "Microsoft.AspNetCore.Http.Connections": "Debug"
    }
}

• 查看Apache错误日志（/var/log/apache2/error.log）及Kestrel应用日志，定位隐藏错误信息

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