Azure部署SignalR跨应用通信时控制台报错及警告排查

一、SignalR连接中断问题（已解决） #

问题现象 #

本地跨应用SignalR通信（WebApp与ASP.NET MVC应用）运行正常，但部署到Azure后，UI启动时控制台出现连接中断错误，自动降级为SSE传输：

[ERROR]
* 页面加载时与https://mywebapp.eastus-01.azurewebsites.net/NotificationHub?id=aaaaaaaaaaaaaaaaaaaa-g的连接被中断。signalr.js:2446:31
* [2024-09-21T20:15:31.733Z] 信息：连接已断开。signalr.js:453:30
* [2024-09-21T20:15:32.420Z] 信息：SSE已连接到https://mywebapp.eastus-01.azurewebsites.net/NotificationHub?id=s8Tsz4ASX_0G9QDnVp9o7g signalr.js:453:30

原因分析 #

Azure应用服务默认未启用WebSocket功能，导致SignalR无法使用WebSocket传输，触发连接中断后自动 fallback到SSE。

解决步骤 #

1. 登录Azure门户，进入目标Web App的管理页面；
2. 左侧导航栏选择「设置」→「配置」；
3. 切换到「常规设置」标签页；
4. 找到「WebSocket」选项，设置为「启用」；
5. 点击「保存」，并重启Web App。

启用后，连接中断错误消失，SignalR可正常使用WebSocket传输。

二、Source Map 404警告排查 #

问题现象 #

WebSocket问题解决后，控制台仍存在Source Map请求404警告：

[WARNING]
* Source map错误：Error: 请求失败，状态码404
资源URL：https://myuiapp.eastus-01.azurewebsites.net/lib/microsoft/signalr/dist/browser/signalr.js
Source Map URL: signalr.js.map

已确认signalr.js.map实际存在于Azure Web App的C:\home\site\wwwroot\wwwroot\lib\microsoft\signalr\dist\browser\目录下。

排查方向 #

1. 路径匹配验证

   • 检查signalr.js文件末尾的//# sourceMappingURL=signalr.js.map是否为正确的相对路径；
   • 确认浏览器请求的signalr.js.map路径与实际文件路径一致，排查是否因多级wwwroot目录导致路径偏移。

2. 静态文件服务配置

   • 确认UI应用的Program.cs/Startup.cs中已启用静态文件服务：

     app.UseStaticFiles();
     

   • 若有自定义静态文件配置，检查是否排除了.map后缀的文件访问。

3. 部署完整性检查

   • 通过Kudu控制台再次确认site/wwwroot/wwwroot/lib/microsoft/signalr/dist/browser/目录下是否存在signalr.js.map；
   • 检查部署脚本/流程是否遗漏了.map文件的上传（部分构建工具默认会排除.map文件）。

4. 浏览器缓存清理

   • 强制刷新浏览器（Ctrl+F5），清除缓存后重新加载页面，排查是否为旧缓存导致的路径请求错误。

5. Azure应用服务规则检查

   • 检查Web App的URL重写规则，确认是否存在阻止.map文件访问的规则；
   • 排查应用服务的防火墙/安全策略是否拦截了.map文件的请求。

参考配置 #

API端CORS与SignalR配置

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: "CorsSignalr", policyBuilder =>
        policyBuilder
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials()
            .SetIsOriginAllowed(hostName => true));
});

app.UseCors("CorsSignalr");
app.MapHub<NotificationHub>("/NotificationHub");

UI端SignalR连接配置

let signalRHostName= document.getElementById("API_HOST_ADDRESS").value
var connection = new signalR.HubConnectionBuilder()
    .withUrl(signalRHostName.concat("/NotificationHub"))
    .withAutomaticReconnect()
    .build();

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