如何将React Native应用连接到Microsoft SignalR并解决连接报错问题

• 第一步：排查基础网络连通性
  首先排除RN本身的网络访问限制问题：
  1. 如果后端运行在本地开发机，不要在RN请求地址中使用localhost/127.0.0.1：Android 模拟器需使用10.0.2.2映射本机地址，iOS 模拟器可直接使用本机局域网IP，真机需与开发机处于同一局域网，使用开发机的局域网IP作为请求地址。
  2. 确认后端服务未绑定仅本地监听，需将.NET 服务启动地址绑定为0.0.0.0，允许局域网内设备访问。
  3. 验证普通网络请求是否可通：在RN代码中先使用fetch调用后端任意普通接口，若fetch也返回网络请求失败，说明是通用网络问题，与SignalR无关，优先解决网络访问权限问题。
  4. 明文HTTP请求权限配置：Android 9（API 28）及以上默认禁止明文HTTP请求，若后端未配置HTTPS，需在android/app/src/main/AndroidManifest.xml的application节点添加属性android:usesCleartextTraffic="true"；iOS 需在Info.plist中添加NSAppTransportSecurity例外配置，允许访问对应HTTP域名。
• 第二步：修正SignalR客户端依赖与配置
  1. 卸载废弃的@aspnet/signalr包，仅安装官方维护的@microsoft/signalr最新稳定版。
  2. 连接配置示例：开启调试日志定位错误环节

  import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
  
  // 注意替换为实际的服务地址与Hub路径
  const connection = new HubConnectionBuilder()
    .withUrl('http://你的局域网IP:服务端口/chatHub')
    .configureLogging(LogLevel.Debug)
    .build();
  
  // 启动连接逻辑
  const startConnection = async () => {
    try {
      await connection.start();
      console.log('SignalR 连接成功');
    } catch (error) {
      console.error('连接失败', error);
      setTimeout(startConnection, 5000);
    }
  };
  
  startConnection();
  

• 第三步：修正.NET 后端配置
  1. 确保已开启WebSocket中间件，且CORS配置允许凭据（SignalR 连接默认携带凭据，必须开启），中间件顺序不能出错，.NET 6+ 配置示例如下：

  var builder = WebApplication.CreateBuilder(args);
  
  // 添加CORS服务
  builder.Services.AddCors(options =>
  {
      options.AddPolicy("SignalRCors", policy =>
      {
          policy.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials(); // 必须配置，否则SignalR跨域请求会被拦截
      });
  });
  
  builder.Services.AddSignalR();
  
  var app = builder.Build();
  
  // 中间件顺序严格按照以下顺序
  app.UseRouting();
  app.UseCors("SignalRCors"); // 必须放在UseRouting之后，UseAuthorization之前
  app.UseAuthorization();
  
  // 映射Hub时指定CORS策略
  app.MapHub<ChatHub>("/chatHub").RequireCors("SignalRCors");
  
  app.Run();
  

• 第四步：特殊场景排查
  1. 若后端使用JWT认证，需将token放在请求URL的查询参数中传递，因为WebSocket协议不支持自定义请求头。
  2. 若网络存在代理/防火墙，确认WebSocket协议（ws/wss）未被拦截。

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