在React+Next.js中接收并展示外部站点POST的表单数据

针对你用React+Next.js开发的站点接收外部POST表单数据并展示的需求，给你两个实用方案：

方案一：用API路由接收数据（推荐） #

这种方式把数据处理和页面展示分开，更符合Next.js的架构设计。

1. 新建API路由文件 #

在项目的pages/api目录下创建submit-form.js，用来接收POST请求：

export default async function handler(req, res) {
  if (req.method === 'POST') {
    // 提取表单里的SecureID
    const { SecureID } = req.body;
    
    // 重定向到/test页面，用查询参数传递数据
    res.redirect(`/test?secureId=${SecureID}`);
  } else {
    // 拒绝非POST请求
    res.status(405).send('仅支持POST请求');
  }
}

2. 修改源站点表单的提交地址 #

把源站点表单的action改成API路由的地址：

<form action='/api/submit-form' method="post">
  <input type='hidden' name='SecureID' value='240127915991'/>
  <input type="submit" value="Submit">
</form>

3. 编写/test展示页面 #

在pages/test.js里写页面组件，读取查询参数并展示数据：

import { useRouter } from 'next/router';

export default function TestPage() {
  const router = useRouter();
  const { secureId } = router.query;

  return (
    <div style={{ padding: '2rem' }}>
      <h2>提交的表单数据</h2>
      {secureId ? (
        <p>SecureID: <strong>{secureId}</strong></p>
      ) : (
        <p>还没有提交的数据哦</p>
      )}
    </div>
  );
}

方案二：直接在/test页面处理POST请求 #

如果不想用API路由，也可以在页面的服务端逻辑里直接处理POST请求：

import { useRouter } from 'next/router';

export default function TestPage({ secureId }) {
  return (
    <div style={{ padding: '2rem' }}>
      <h2>提交的表单数据</h2>
      {secureId ? (
        <p>SecureID: <strong>{secureId}</strong></p>
      ) : (
        <p>还没有提交的数据哦</p>
      )}
    </div>
  );
}

export async function getServerSideProps(context) {
  const { req, res } = context;
  let secureId = null;

  if (req.method === 'POST') {
    // 解析POST表单的内容
    const formData = await new Promise((resolve) => {
      let rawData = '';
      req.on('data', chunk => rawData += chunk);
      req.on('end', () => resolve(new URLSearchParams(rawData)));
    });
    secureId = formData.get('SecureID');

    // 重定向为GET请求，避免刷新页面重复提交
    res.writeHead(302, { Location: `/test?secureId=${secureId}` });
    res.end();
    return { props: {} };
  } else {
    // GET请求时从URL查询参数拿数据
    secureId = context.query.secureId;
  }

  return {
    props: { secureId }
  };
}

这种情况下，源站点的表单action可以直接写/test。

注意事项 #

• 表单里的name属性（这里是SecureID）要和后端获取的字段名完全一致，不然拿不到数据
• 如果不想让数据暴露在URL里，可以把SecureID存到数据库或者会话中，再从会话读取展示
• 生产环境记得加数据验证，比如检查SecureID的格式是否合法，防止恶意提交

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