如何通过ASP.Net Web API实现向Angular 5页面的重定向？

看起来你已经搭好了后端API的核心逻辑，我来帮你把整个重定向流程补全，适配Angular 5的单页应用场景——毕竟SPA里直接用后端3xx重定向会有坑，咱们用「后端返回跳转参数，前端主动触发重定向」的方式更稳妥。

首先先把你的API代码规整一下（方便后续参考）：

[System.Web.Http.HttpGet]
public string[] Payment(string uri)
{
    try
    {
        RegistrationRequestX reg = new RegistrationRequestX();
        reg.Customer = "Test Api";
        reg.Channel = Channels.Web;
        reg.Language = "EN";
        reg.Amount = 10;
        reg.OrderID = "1234";
        reg.OrderInfo = "test info";
        reg.OrderName = "testing order";
        
        string retPath = uri;
        retPath = retPath.Replace("payment", "confirmation");
        reg.ReturnPath = retPath;
        
        RegistrationResponseX res = new RegistrationResponseX();
        res = client.Register(reg);
        client.Close();
        
        string[] sess = new string[2];
        sess[0] = paymentPortalURL; // 这里建议从res里取实际返回的门户地址
        sess[1] = transactionID;    // 同理，从res里取真实的交易ID
        return sess;
    }
    catch (Exception)
    {
        throw;
    }
}

前端Angular 5实现步骤 #

1. 封装支付API调用服务

先创建一个支付服务，用来调用后端的Payment接口：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class PaymentService {
  constructor(private http: HttpClient) {}

  // 调用后端支付初始化接口
  initiatePayment(returnBaseUri: string): Observable<string[]> {
    // 注意对URI参数编码，避免特殊字符解析错误
    const apiEndpoint = `/api/Payment?uri=${encodeURIComponent(returnBaseUri)}`;
    return this.http.get<string[]>(apiEndpoint);
  }
}

2. 在组件中处理重定向逻辑

在你的支付组件里，调用上面的服务，拿到返回的支付门户URL和交易ID后，触发浏览器跳转：

import { Component } from '@angular/core';
import { PaymentService } from './payment.service';

@Component({
  selector: 'app-payment',
  templateUrl: './payment.component.html'
})
export class PaymentComponent {
  constructor(private paymentService: PaymentService) {}

  startPaymentProcess() {
    // 把当前页面URL传给后端，用来生成支付完成后的返回路径
    const currentPageUri = window.location.href;

    this.paymentService.initiatePayment(currentPageUri).subscribe(
      (responseData) => {
        const paymentPortalUrl = responseData[0];
        const transactionId = responseData[1];

        // 把交易ID存在本地存储，等用户从支付门户回来时可以验证状态
        localStorage.setItem('currentTransactionId', transactionId);

        // 跳转到第三方支付门户
        window.location.href = paymentPortalUrl;
      },
      (error) => {
        console.error('支付初始化失败:', error);
        // 这里可以添加用户友好的错误提示，比如弹窗显示失败原因
      }
    );
  }
}

几个关键注意点 #

• 为什么不用后端直接重定向？：Angular的HttpClient会自动处理3xx状态码的响应，不会触发浏览器的页面跳转，所以这种「返回参数+前端主动跳转」的方式更适配SPA场景。
• 参数编码：一定要用encodeURIComponent处理传入的URI参数，避免URL里的特殊字符（比如&、=）导致后端解析错误。
• 交易ID存储：把交易ID存在localStorage里，当用户从支付门户跳回你的confirmation页面时，可以取出这个ID，调用后端接口验证交易状态。
• API参数修正：你的代码里paymentPortalURL和transactionID看起来是硬编码的，记得改成从RegistrationResponseX res里获取真实的返回值，比如res.PaymentUrl、res.TransactionId（具体字段名根据支付网关的响应结构来）。

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