Web API通过SignalR发消息，Angular无法接收且跳转至API地址

你遇到两个核心问题：页面跳转到Web API URI、Angular无法接收SignalR消息，下面分别给出针对性解决方法：

一、解决页面跳转问题 #

页面跳转的根本原因是前端通过表单同步提交到Web API接口，浏览器会自动跳转到接口地址。解决方式：

1. 改用异步请求提交支付参数
   不要用HTML表单的action属性指向Web API，而是用Angular的HttpClient发送异步POST请求：

   // 在支付组件中
   constructor(private http: HttpClient) {}
   
   submitPayment() {
     const paymentData = { /* 你的支付参数 */ };
     this.http.post('http://localhost:5033/api/payment', paymentData)
       .subscribe(response => {
         // 获取银行网关跳转地址，前端直接跳转到网关
         window.location.href = response.gatewayUrl;
       });
   }
   

   银行网关完成支付后，回调Web API的后端接口（而非前端页面），Web API处理完后通过SignalR推送状态给Angular。

2. 确保Web API回调接口不返回跳转响应
   处理网关回调的Web API接口，仅返回成功状态即可，不要返回跳转结果：

   [HttpPost("callback")]
   public async Task<IActionResult> PaymentCallback([FromBody] GatewayResponse response)
   {
       // 处理支付响应逻辑
       await _hubContext.Clients.All.SendAsync("ReceiveMessage", response.Data);
       return Ok(); // 返回200状态码，不触发页面跳转
   }
   

二、解决SignalR消息接收问题 #

1. 修正Web API端配置 #

（1）添加Hub路由映射

在Program.cs中必须明确映射Hub的路由，且顺序要在UseCors之后：

// 其他配置...
app.UseCors("EnableCors");

app.UseRouting();
app.UseAuthorization();

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    endpoints.MapHub<MyHub>("/myHub"); // 关键：与Angular端的Hub URL保持一致
});

（2）优化CORS配置

你的CORS配置中SetIsOriginAllowedToAllowWildcardSubdomains与WithOrigins("http://localhost:4200")冲突（后者是具体域名，不需要通配符支持），删除该配置项：

builder.Services.AddCors(options =>
{
    options.AddPolicy("EnableCors",
        builder => builder
            .WithOrigins("http://localhost:4200")
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials()
    );
});

（3）确认HubContext注入正确

在处理网关回调的控制器中，确保正确注入IHubContext<MyHub>：

private readonly IHubContext<MyHub> _hubContext;

public PaymentController(IHubContext<MyHub> hubContext)
{
    _hubContext = hubContext;
}

2. 修正Angular端SignalR服务 #

（1）初始化Subject并修正消息发射逻辑

在SignalR服务中先初始化paymentStatusSubject，且发射消息时传递实际数据而非Subject本身：

import { Injectable, Output, EventEmitter } from '@angular/core';
import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SignalRService {
  @Output() onSignalRMessage: EventEmitter<any> = new EventEmitter();
  private hubConnection: HubConnection;
  private paymentStatusSubject = new Subject<any>(); // 初始化Subject

  constructor() {
    this.startConnection();
  }

  public startConnection = () => {
    console.log('Starting connection...');
    this.hubConnection = new HubConnectionBuilder()
      .withUrl('http://localhost:5033/myHub', {
        accessTokenFactory: () => localStorage.getItem('tax-cookie')
      })
      .build();

    this.hubConnection.start()
      .then(() => {
        console.log('Connection started');
        this.receiveMessage(); // 连接成功后再注册监听，避免失效
      })
      .catch(err => console.log('Error while starting connection: ' + err));
  }

  receiveMessage = () => {
    this.hubConnection.on('ReceiveMessage', (message: any) => {
      console.log('receiveMessage: ', message);
      this.paymentStatusSubject.next(message);
      this.onSignalRMessage.emit(message); // 发射实际消息数据
    });
  }
}

（2）修正AppComponent中的订阅逻辑

确保订阅时能正确获取消息内容：

export class AppComponent {
  public messages: any[] = [];

  constructor(private signalRService: SignalRService) { }

  ngOnInit() {
    this.signalRService.onSignalRMessage.subscribe((data) => {
      this.messages.push(data);
      console.log('Received message: ', data); // 直接打印接收的消息
    });
  }
}

三、调试建议 #

1. 打开浏览器开发者工具的Network标签，查看SignalR的negotiate请求是否成功（状态码应为200）。
2. 查看Console标签，检查是否有SignalR连接错误或消息接收日志。
3. 在Web API的PaymentCallback方法中添加日志，确认网关回调已触发，且SendAsync方法无异常。

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