如何在Angular应用中捕获第三方门户POST提交的表单数据

浏览器端运行的Angular属于前端单页应用，没有权限直接读取POST请求的请求体内容，第三方表单提交的POST参数会直接发送给托管你Angular应用的后端服务，所以你直接在前端代码里拿不到参数是正常的。

方案一：协调第三方修改表单提交方式（推荐，改动量最小） #

如果可以和第三方供应商协商，将表单的method属性从post改为get，表单提交时参数会自动拼接在跳转URL的查询参数中，Angular可以直接读取。
修改后的表单示例：

<form id="ApplicationRedirectForm" encType="application/x-www-form-urlencoded" method="get" name="login" action="http://localhost:4200/" target="_blank">
    <input name="login" value="test" type="hidden">
    <input name="country" value="testcountry" type="hidden">
    <input name="city" value="testcity" type="hidden">
    <input type="submit" value="submit">
</form>

Angular端读取参数代码：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      const login = params['login'];
      const country = params['country'];
      const city = params['city'];
      // 此处处理拿到的参数
      console.log(login, country, city);
    });
  }
}

方案二：第三方无法修改表单时，通过托管层中转参数 #

如果第三方不能调整表单提交规则，需要在托管Angular应用的服务层先拦截POST请求，把参数处理后再传递给前端。

子方案1：Nginx托管时自动转查询参数 #

在Nginx配置中新增拦截逻辑，把POST请求的表单参数转成URL查询参数后重定向到Angular路由：

location = / {
    if ($request_method = POST) {
        # 把表单参数拼到URL后重定向
        return 302 /?$args;
    }
    # 正常GET请求走Angular静态资源逻辑
    try_files $uri $uri/ /index.html;
}

配置后还是使用方案一中的Angular代码读取查询参数即可。

子方案2：Node.js托管时注入全局参数 #

如果用Express等Node.js服务托管Angular，可以在服务端接收POST参数后，写入全局变量传递给前端：
Node服务端代码：

const express = require('express');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));

// 处理POST请求
app.post('/', (req, res) => {
  const { login, country, city } = req.body;
  // 读取Angular打包后的index.html
  let html = fs.readFileSync(path.join(__dirname, 'dist/your-project-name/index.html'), 'utf8');
  // 把参数注入到全局变量
  html = html.replace('<!-- POST_PARAMS_PLACEHOLDER -->', 
    `<script>window.postParams = { login: '${login}', country: '${country}', city: '${city}' }</script>`);
  res.send(html);
});

// 处理正常静态资源请求
app.use(express.static(path.join(__dirname, 'dist/your-project-name')));
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/your-project-name/index.html'));
});

app.listen(4200);

然后在Angular的index.html里加入占位符：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- POST_PARAMS_PLACEHOLDER -->
</head>
<body>
  <app-root></app-root>
</body>
</html>

Angular端读取全局参数代码：

ngOnInit() {
  const params = (window as any).postParams;
  if (params) {
    const login = params.login;
    const country = params.country;
    const city = params.city;
    // 处理参数
  }
}

• 若参数包含敏感信息，不建议使用POST转GET的方案，避免参数被浏览器历史、日志留存泄露，建议在中转层做加密处理后再传递给前端。
• 本地使用ng serve启动的开发服务默认不支持处理POST请求到首页，会返回404，本地测试POST场景时需要打包后用Nginx/Node服务托管测试。

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