Angular应用接收PSP支付POST回调报错Cannot POST /callback，如何解决？

Angular是单页应用（SPA），其客户端路由仅能处理GET请求。当支付服务提供商（HPP）发起POST请求到/callback时，你的服务器（不管是Nginx、Apache还是Node.js后端）没有对应的POST路由处理逻辑，因此返回"Cannot POST /callback"错误——你的Angular前端根本没机会接收到这个POST请求。

必须通过后端接口接收HPP的POST请求，处理完支付数据后再和前端交互，具体步骤如下：

1. 后端实现POST /callback接口 #

在你的后端服务（Node.js/Java/Python等）中编写专门的POST接口，负责：

• 验证HPP回调的签名（必须做，防止伪造请求）
• 解析HPP发送的支付结果表单数据
• 更新数据库中的发票状态
• 重定向到Angular的前端页面，传递支付结果参数

示例（Express.js后端） #

app.post('/callback', async (req, res) => {
  // 1. 验证HPP提供的回调签名（根据PSP文档实现）
  const isValidSignature = verifyPspCallbackSignature(req.body, req.headers['x-psp-signature']);
  if (!isValidSignature) {
    return res.status(403).send('Invalid callback signature');
  }

  // 2. 解析支付结果数据
  const { invoiceNumber, paymentStatus, transactionId } = req.body;

  // 3. 更新数据库中的发票状态
  await updateInvoicePaymentStatus(invoiceNumber, paymentStatus, transactionId);

  // 4. 重定向到Angular的结果页面，携带查询参数
  res.redirect(`/callback-result?invoice=${invoiceNumber}&status=${paymentStatus}`);
});

2. 前端调整：创建支付结果页面 #

删除原有的/callback前端路由，新增一个/callback-result路由对应的组件，用来接收后端重定向过来的参数并处理页面跳转。

示例（Angular组件代码） #

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

@Component({
  selector: 'app-callback-result',
  templateUrl: './callback-result.component.html'
})
export class CallbackResultComponent implements OnInit {
  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      const invoiceId = params['invoice'];
      const paymentStatus = params['status'];

      // 可根据状态显示成功/失败提示
      console.log(`发票${invoiceId}支付状态：${paymentStatus}`);

      // 跳转到财务页面
      this.router.navigate(['/financial']);
    });
  }
}

3. 服务器配置调整（静态部署场景） #

如果你的Angular应用部署在Nginx/Apache等静态服务器上，需要配置服务器将POST请求转发到后端接口，GET请求则正常交给Angular处理。

示例（Nginx配置） #

server {
  # 处理Angular的静态资源和GET路由
  location / {
    try_files $uri $uri/ /index.html;
  }

  # 将POST /callback转发到后端服务
  location /callback {
    proxy_pass http://your-backend-server:3000;
    proxy_set_header Content-Type application/x-www-form-urlencoded;
    proxy_set_header Host $host;
  }
}

• 永远不要跳过回调签名验证：HPP的回调可能被伪造，必须按照PSP提供的验证逻辑确认请求合法性。
• 避免直接在前端处理支付结果：支付状态的更新必须由后端完成，前端仅负责展示结果和页面跳转。

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