Angular中使用CLI代理URL消费SignalR失败，求配置指引

1. 配置代理规则文件 #

在Angular项目根目录创建或修改proxy.conf.json，添加适配SignalR的代理配置：

{
  "/logs/*": {
    "target": "https://localhost:5500",
    "secure": false,
    "changeOrigin": true,
    "ws": true,
    "logLevel": "debug"
  }
}

• target：填写SignalR服务的实际地址
• ws: true：开启WebSocket协议支持（SignalR默认优先用WebSocket）
• secure: false：忽略本地自签证书的安全校验（生产环境可根据实际调整）
• logLevel: debug：方便查看代理转发日志，调试时启用

2. 修改项目启动命令 #

打开package.json，更新start命令以加载代理配置：

"scripts": {
  "start": "ng serve --proxy-config proxy.conf.json",
  // 其他命令保持不变
}

3. 调整SignalR连接URL #

把原代码中的绝对路径替换为代理后的相对路径：

signalRUrl = "/logs/";
private hubConnection!: signalR.HubConnection;

constructor(private http: HttpClient) { }

public startConnection = () => {
  this.hubConnection = new signalR.HubConnectionBuilder()
    .withUrl(this.signalRUrl)
    .build();

  this.hubConnection.start()
    .then(() => alert('Connection started'))
    .catch(err => alert('Error while starting connection: ' + err))
}

4. 常见问题排查 #

• 确认代理路径/logs/*与SignalR Hub的路由完全匹配
• 启动项目后查看终端的代理日志，检查请求是否正确转发到目标服务
• 如果仍有连接问题，可尝试在withUrl中添加传输方式配置，强制使用长轮询排查：

  .withUrl(this.signalRUrl, {
    transport: signalR.HttpTransportType.LongPolling
  })
  

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