Angular 2应用接收POST带参外部重定向及支付回调问题

看起来你遇到的应该是Cannot GET /result这类的报错吧？这在Angular单页应用里太常见了，核心问题出在这两点：

Angular是客户端路由驱动的SPA，当第三方支付平台用POST请求直接重定向到你的/result路由时，你的后端服务器会试图寻找对应/result的静态文件，但这个路由其实是Angular客户端定义的，服务器根本找不到，所以就抛出了无法GET的错误。而且第三方用的是POST请求，默认情况下Angular也没法直接获取到POST的参数。

下面给你分步骤解决这个问题：

第一步：配置服务器端Fallback到Angular入口文件 #

不管你用的是哪种服务器，都需要配置让所有找不到的路由（包括POST请求的路由）都 fallback 到Angular的index.html，这样Angular的客户端路由才能接管请求。

示例1：Node.js/Express服务器 #

在你的Express配置里添加：

const path = require('path');
const fs = require('fs');

// 托管Angular打包后的静态文件
app.use(express.static(path.join(__dirname, 'dist/your-angular-app-name')));

// 处理所有GET请求的Fallback
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/your-angular-app-name/index.html'));
});

// 重点：处理第三方的POST请求Fallback
app.post('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/your-angular-app-name/index.html'));
});

示例2：Nginx服务器 #

在你的Nginx配置的location块里添加：

location / {
  try_files $uri $uri/ /index.html;
}

# 允许POST请求到客户端路由，避免Nginx返回405错误
error_page 405 =200 $uri;

第二步：接收第三方支付的POST参数 #

现在服务器能把POST请求转发到Angular了，但Angular客户端没法直接读取POST请求体，这里给你两种实用的处理方式：

方式1：服务器中转，转为GET传递参数（推荐） #

这种方式更简单可靠，服务器先接收第三方的POST请求，提取支付参数后，用GET重定向到Angular的/result路由，把参数放在URL查询串里：

app.post('/result', (req, res) => {
  // 提取第三方POST过来的支付参数（比如订单ID、支付状态等）
  const { orderId, payStatus, transactionId } = req.body;
  // 重定向到Angular的result路由，携带查询参数
  res.redirect(`/result?orderId=${orderId}&status=${payStatus}&transId=${transactionId}`);
});

然后在Angular的ResultComponent里，通过ActivatedRoute获取参数：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    const orderId = params['orderId'];
    const payStatus = params['status'];
    // 在这里处理支付结果的验证逻辑
  });
}

方式2：直接在Angular中读取全局注入的POST参数 #

如果不想修改服务器的路由逻辑，可以让服务器把POST参数注入到index.html中，变成全局变量供Angular读取：

app.post('*', (req, res) => {
  // 读取POST请求体并转为JSON字符串
  const paymentData = JSON.stringify(req.body);
  // 读取Angular的index.html，注入全局变量
  const indexHtml = fs.readFileSync(path.join(__dirname, 'dist/your-app/index.html'), 'utf8');
  const modifiedHtml = indexHtml.replace('</body>', `<script>window.paymentResult = ${paymentData};</script></body>`);
  res.send(modifiedHtml);
});

然后在Angular的ResultComponent里读取：

// 声明全局window变量类型
declare var window: any;

ngOnInit() {
  const paymentResult = window.paymentResult;
  if (paymentResult) {
    // 处理支付结果
    console.log('支付结果：', paymentResult);
    // 用完清空变量，避免其他页面获取到
    delete window.paymentResult;
  }
}

额外关键提醒 #

• 不要用localhost:4200作为RedirectUrl提交给第三方，正式环境下第三方支付平台通常不允许重定向到本地地址，要用你的服务器公网域名（比如https://your-domain.com/result）。
• 支付结果的核心验证必须在服务器端做！客户端拿到的参数可能被篡改，你一定要在服务器端调用第三方支付平台的官方查询API，再次确认支付状态后，再把可信结果返回给客户端。

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