Blazor Server使用Fast.Components.FluentUI时SSL连接建立失败问题

问题场景 #

基于.NET 7的Blazor Server项目集成Fast.Components.FluentUI组件库后，部署到Azure App Service出现以下异常：

• 包含<FluentDataGrid>的页面抛出SSL连接错误
• <FluentIcon>组件无法正常渲染
• 本地开发环境无任何问题，仅Azure部署环境触发该错误

错误日志 #

[2023-03-24T09:47:34.226Z] Error: System.Net.Http.HttpRequestException: The SSL connection could not be established, see inner exception.
 ---> System.IO.IOException:  Received an unexpected EOF or 0 bytes from the transport stream.
   at System.Net.Security.SslStream.ReceiveBlobAsync[TIOAdapter](CancellationToken cancellationToken)
   at System.Net.Security.SslStream.ForceAuthenticationAsync[TIOAdapter](Boolean receiveFirst, Byte[] reAuthenticationData, CancellationToken cancellationToken)
   at System.Net.Http.ConnectHelper.EstablishSslConnectionAsync(SslClientAuthenticationOptions sslOptions, HttpRequestMessage request, Boolean async, Stream stream, CancellationToken cancellationToken)
   --- End of inner exception stack trace ---
   at System.Net.Http.ConnectHelper.EstablishSslConnectionAsync(SslClientAuthenticationOptions sslOptions, HttpRequestMessage request, Boolean async, Stream stream, CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.ConnectAsync(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.CreateHttp11ConnectionAsync(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.AddHttp11ConnectionAsync(QueueItem queueItem)
   at System.Threading.Tasks.TaskCompletionSourceWithCancellation`1.WaitWithCancellationAsync(CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.HttpConnectionWaiter`1.WaitForConnectionAsync(Boolean async, CancellationToken requestCancellationToken)
   at System.Net.Http.HttpConnectionPool.SendWithVersionDetectionAndRetryAsync(HttpRequestMessage request, Boolean async, Boolean doRequestAuth, CancellationToken cancellationToken)
   at System.Net.Http.DiagnosticsHandler.SendAsyncCore(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at System.Net.Http.RedirectHandler.SendAsync(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at Microsoft.Extensions.Http.Logging.LoggingHttpMessageHandler.<SendAsync>g__Core|5_0(HttpRequestMessage request, CancellationToken cancellationToken)
   at Microsoft.Extensions.Http.Logging.LoggingScopeHttpMessageHandler.<SendAsync>g__Core|5_0(HttpRequestMessage request, CancellationToken cancellationToken)
   at System.Net.Http.HttpClient.<SendAsync>g__Core|83_0(HttpRequestMessage request, HttpCompletionOption completionOption, CancellationTokenSource cts, Boolean disposeCts, CancellationTokenSource pendingRequestsCts, CancellationToken originalCancellationToken)
   at Microsoft.Fast.Components.FluentUI.HttpBasedStaticAssetService.GetAsync(String assetUrl, Boolean useCache) in /_/src/Microsoft.Fast.Components.FluentUI/Infrastructure/HttpBasedStaticAssetService.cs:line 50
   at Microsoft.Fast.Components.FluentUI.FluentIcon.OnAfterRenderAsync(Boolean firstRender) in /_/src/Microsoft.Fast.Components.FluentUI/Components/Icon/FluentIcon.cs:line 161
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

临时解决方法 #

已通过替换<FluentIcon />为原生HTML标签临时修复，示例：

<i class="ms-Icon ms-Icon--Edit" aria-hidden="true"></i>

原生解决方案 #

从错误栈分析，问题根源是HttpBasedStaticAssetService远程加载图标资源时SSL连接失败，以下是针对性修复方案：

方案1：切换为本地嵌入资源加载（推荐） #

将图标资源嵌入到项目程序集中，彻底规避远程HTTP请求：

1. 安装Microsoft.Fast.Components.FluentUI.Icons NuGet包
2. 在Program.cs中替换默认静态资源服务：

builder.Services.AddFluentUIComponents();
// 用EmbeddedStaticAssetService替代默认的HttpBasedStaticAssetService
builder.Services.Replace(ServiceDescriptor.Scoped<IStaticAssetService, EmbeddedStaticAssetService>());

方案2：调整HttpClient的SSL验证逻辑（仅适用于必须远程加载的场景） #

若需保留远程加载模式，可针对FluentUI使用的HttpClient配置SSL规则：

// 配置自定义HttpClient，跳过SSL验证（仅测试环境使用，生产环境不建议）
builder.Services.AddHttpClient("FluentUI")
    .ConfigurePrimaryHttpMessageHandler(() => new HttpClientHandler
    {
        ServerCertificateCustomValidationCallback = (message, cert, chain, errors) => true
    });

// 指定FluentUI使用该自定义HttpClient
builder.Services.AddFluentUIComponents(options =>
{
    options.HttpClientName = "FluentUI";
});

生产环境建议检查目标CDN的SSL证书是否被Azure环境信任，或调整Azure App Service的TLS/SSL设置（推荐使用TLS 1.2及以上版本）。

方案3：检查Azure App Service网络配置 #

• 确认App Service出站规则允许访问FluentUI图标CDN域名（如https://cdn.jsdelivr.net）
• 若使用VNet集成或NSG，需确保出站流量能到达目标域名
• 检查App Service的TLS版本设置，确保与CDN服务器兼容

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