Angular 7应用中后端302响应的处理方案咨询

刚碰到过几乎一模一样的场景，Angular的HttpClient确实会自动跟进302重定向，导致我们拿不到后端返回的跳转地址，没法手动处理商户页面的跳转。给你几个实测有效的解决方案：

方案一：后端返回JSON结果，前端自行跳转（最推荐） #

这是最稳妥的方式，跟后端开发同学沟通，让他们不要直接返回302，而是在支付完成后返回包含支付状态和跳转URL的JSON数据。前端拿到结果后，用window.location.href或者Angular Router跳转到对应的商户页面。

示例代码：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

submitPayment(paymentData: any) {
  this.http.post('/api/payment/process', paymentData)
    .subscribe((result: any) => {
      if (result.status === 'success') {
        // 跳转到支付成功的商户页面
        window.location.href = result.successRedirectUrl;
      } else {
        // 跳转到支付失败的商户页面
        window.location.href = result.failRedirectUrl;
      }
    }, (error) => {
      // 处理请求失败的情况
      console.error('支付请求出错:', error);
    });
}

方案二：用原生Fetch/XMLHttpRequest替代HttpClient（适合后端必须用302的场景） #

如果后端没办法修改返回逻辑，我们可以用原生的Fetch API或者XMLHttpRequest，通过设置手动处理重定向来捕获302的Location头。

注意：跨域场景下浏览器会屏蔽Location头，这个方案只适合同域支付的情况。

Fetch示例代码：

submitPayment(paymentData: any) {
  fetch('/api/payment/process', {
    method: 'POST',
    body: JSON.stringify(paymentData),
    headers: {
      'Content-Type': 'application/json'
    },
    redirect: 'manual' // 关键：禁用自动重定向
  })
  .then(response => {
    if (response.status === 302) {
      const redirectUrl = response.headers.get('Location');
      if (redirectUrl) {
        window.location.href = redirectUrl;
      }
    }
  })
  .catch(error => {
    console.error('支付请求出错:', error);
  });
}

方案三：用隐藏iframe处理支付请求（跨域场景友好） #

如果是跨域支付，且后端必须返回302，那么可以用隐藏的iframe来发起支付请求，监听iframe的地址变化来判断支付状态，再跳转商户页面。

组件模板：

<!-- 隐藏的iframe，用于发起支付请求 -->
<iframe #paymentFrame style="display: none; width: 0; height: 0;"></iframe>

组件代码：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-payment',
  templateUrl: './payment.component.html'
})
export class PaymentComponent {
  @ViewChild('paymentFrame') paymentFrame: ElementRef;

  submitPayment() {
    // 创建一个表单，模拟支付请求的参数
    const paymentForm = document.createElement('form');
    paymentForm.method = 'POST';
    paymentForm.action = 'https://payment-gateway.com/process'; // 支付网关地址

    // 添加支付参数，比如订单ID、金额等
    const orderIdInput = document.createElement('input');
    orderIdInput.type = 'hidden';
    orderIdInput.name = 'orderId';
    orderIdInput.value = 'YOUR_ORDER_ID';
    paymentForm.appendChild(orderIdInput);

    // 将表单添加到iframe中并提交
    const iframeDoc = this.paymentFrame.nativeElement.contentDocument || this.paymentFrame.nativeElement.contentWindow.document;
    iframeDoc.body.appendChild(paymentForm);
    paymentForm.submit();

    // 监听iframe的加载事件，判断跳转地址
    this.paymentFrame.nativeElement.onload = () => {
      const iframeUrl = this.paymentFrame.nativeElement.contentWindow.location.href;
      // 根据支付网关返回的成功/失败页面地址判断状态
      if (iframeUrl.includes('/payment-success')) {
        window.location.href = '/merchant/success-page'; // 商户成功页面
      } else if (iframeUrl.includes('/payment-fail')) {
        window.location.href = '/merchant/fail-page'; // 商户失败页面
      }
    };
  }
}

为什么Angular HttpClient处理不了302？ #

简单说，Angular的HttpClient底层是基于XMLHttpRequest实现的，而XMLHttpRequest默认会自动跟随所有3xx系列的重定向请求，直到拿到最终的响应结果。所以中间的302响应会被浏览器自动处理，前端代码根本捕获不到，也就没法拿到跳转地址。

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