如何解决Angular 5页面无法获取SagePay返回POST变量的问题？

嘿，这个问题我太熟悉了！你遇到的「Cannot POST」报错，本质是因为Angular作为单页应用（SPA），它的路由是客户端层面的——当SagePay直接把POST请求发到你的Angular页面URL时，Laravel服务器根本不知道该怎么处理这个请求（毕竟服务器端没有对应的POST路由来匹配前端页面地址），所以直接报错了。

咱们换个思路，用Laravel后端做中间层来接收回调，再把参数传递给Angular，具体步骤如下：

1. 让Laravel后端接管SagePay的POST回调 #

首先，你得在Laravel里建一个专门的路由和控制器方法，用来接收SagePay的POST请求，别让它直接碰Angular页面。

• 打开routes/web.php（如果是API路由就用routes/api.php），添加一条POST路由：

Route::post('/sagepay/callback', 'PaymentController@sagepayCallback');

• 接着创建PaymentController和对应的处理方法：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PaymentController extends Controller
{
    public function sagepayCallback(Request $request)
    {
        // 🔴 重中之重：先验证SagePay回调的合法性！
        // 一定要按照SagePay官方文档做签名校验，防止伪造的恶意请求
        // 比如验证MD5签名、状态码等，这步绝对不能省

        // 提取SagePay返回的所有POST参数
        $paymentData = $request->all();

        // 这里可以做你需要的业务逻辑：更新订单状态、存储支付记录等
        // Order::where('id', $paymentData['VendorTxCode'])->update(['status' => 'paid']);

        // 把参数传递给Angular页面，有两种常用方式：
        // 方式一：通过URL查询参数传递（适合非敏感数据）
        return redirect()->to('/payment-result?' . http_build_query($paymentData));

        // 方式二：存在Laravel Session中，前端通过API获取（适合敏感数据）
        // session()->put('payment_result', $paymentData);
        // return redirect()->to('/payment-result');
    }
}

2. 在Angular 5中获取支付参数 #

根据你选的参数传递方式，在Angular组件里做对应的处理：

方式一：从URL查询参数获取 #

在你的支付结果页面组件中，用ActivatedRoute来抓取URL里的参数：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-payment-result',
  templateUrl: './payment-result.component.html',
  styleUrls: ['./payment-result.component.css']
})
export class PaymentResultComponent implements OnInit {
  paymentResult: any;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.paymentResult = params;
      // 这里就可以处理结果了：显示给用户、调用后端二次确认等
      console.log('支付回调参数:', this.paymentResult);
    });
  }
}

方式二：通过Laravel API获取Session中的数据 #

如果用Session存储参数，需要在Laravel里再加一个GET路由来返回数据：

Route::get('/payment/result-data', 'PaymentController@getPaymentResult');

然后在PaymentController里添加方法：

public function getPaymentResult()
{
    $paymentData = session()->get('payment_result');
    // 拿到数据后记得清除Session，避免用户刷新页面重复获取
    session()->forget('payment_result');
    return response()->json($paymentData);
}

接着在Angular组件里用HttpClient请求这个API：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-payment-result',
  templateUrl: './payment-result.component.html',
  styleUrls: ['./payment-result.component.css']
})
export class PaymentResultComponent implements OnInit {
  paymentResult: any;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('/api/payment/result-data').subscribe(
      data => {
        this.paymentResult = data;
        console.log('支付回调参数:', this.paymentResult);
      },
      error => {
        console.error('获取支付结果失败:', error);
      }
    );
  }
}

3. 最后一步：更新SagePay的回调配置 #

去你的SagePay商户后台，或者修改你发起支付请求时的配置，把回调URL改成刚才Laravel的路由地址：https://你的域名/sagepay/callback，别再指向Angular页面了！

这样一套操作下来，既解决了POST请求报错的问题，又能安全地拿到SagePay返回的所有参数，完美～

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