Angular+ASP.NET Core应用移动端无法连接SignalR求助

核心问题分析 #

你遇到的两个错误本质都是手机端无法正确访问PC上的SignalR服务：PC端用localhost能正常指向本地服务，但手机的localhost指向自身，再加上跨域配置缺失、WebSocket服务未启用等问题，最终导致连接失败。

具体解决步骤 #

• 替换localhost为局域网IP
  把SignalR连接地址里的localhost换成你的PC在局域网内的实际IP（比如192.168.3.100），同时确保手机和PC处于同一WiFi网络，PC的5142端口未被防火墙拦截。
  修改后的连接代码：

  this.signalingHub = new signalR.HubConnectionBuilder()
    .withUrl('http://192.168.3.100:5142/signaling')
    .build();
  

• 配置正确的跨域策略
  ASP.NET Core必须允许手机端Angular应用的跨域请求，且必须开启AllowCredentials（SignalR连接需要携带凭证）。在Program.cs中添加：

  builder.Services.AddCors(options =>
  {
      options.AddPolicy("SignalRCors", policy =>
      {
          policy.WithOrigins("http://手机端Angular的IP:端口", "https://手机端Angular的IP:端口")
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowCredentials();
      });
  });
  
  // 注意中间件顺序：UseCors必须放在UseRouting之后、UseAuthorization之前
  app.UseRouting();
  app.UseCors("SignalRCors");
  app.UseAuthorization();
  

• 启用WebSocket服务
  ASP.NET Core默认不会自动启用WebSocket，需要在Program.cs中显式添加WebSocket中间件：

  // 放在UseRouting之前加载
  app.UseWebSockets();
  

• 统一HTTP/HTTPS协议
  确保Angular应用和SignalR服务使用相同的协议：

  • 如果Angular用HTTP，SignalR也必须用HTTP；
  • 如果启用了Angular的SSL，ASP.NET Core也要同步配置HTTPS（修改launchSettings.json或添加证书），避免手机浏览器阻止混合内容请求。

• 优先保证协商流程正常
  不要急着设置skipNegotiation: true，先让协商流程跑通，确认基础连接正常后，再根据需求优化传输方式。

额外排查点 #

• 关闭手机的VPN、代理工具，这类工具可能拦截WebSocket连接；
• 用手机浏览器直接访问http://你的PCIP:5142/signaling/negotiate，查看是否能返回正常JSON响应，以此确认服务端是否可达；
• 测试阶段单服务器无需考虑粘性会话，若后续部署多服务器集群再配置该选项。

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