前端JavaScript能否获取外部POST请求的FormData？SagePay场景PaRes问题

嘿，我来帮你搞定这个问题！你遇到的核心点在于：当用户从SagePay的3DS验证页面跳转回你的/make-payment回调URL时，浏览器是直接处理这个POST请求来渲染你的页面的——前端JavaScript在页面加载完成后，是无法直接访问到这次初始POST请求里的FormData的，因为浏览器已经完成了请求处理，没有把原始POST数据暴露给前端环境。

下面给你两种可行的解决方案，推荐优先用第一种：

1. 通过后端中转（最可靠的方案） #

既然/make-payment是你的后端路由，那最佳做法是让后端先接收SagePay发来的POST请求，提取出PaRes参数，再把它传递给前端页面。具体可以这么做：

示例（以Node.js/Express为例） #

后端先捕获POST请求，提取PaRes：

app.post('/make-payment', (req, res) => {
  // 从POST表单数据中获取PaRes（注意根据你的后端框架调整获取方式）
  const paRes = req.body.PaRes;

  // 安全检查：务必验证请求来自SagePay（比如校验签名，避免伪造请求）
  // ... 这里加入SagePay的签名验证逻辑 ...

  // 方案A：重定向到前端页面，把PaRes作为查询参数传递
  const encodedPaRes = encodeURIComponent(paRes);
  res.redirect(`/payment-success?PaRes=${encodedPaRes}`);

  // 或者方案B：直接渲染前端页面，把PaRes注入为全局变量
  // res.render('payment-success', { paRes: paRes });
});

然后前端就能轻松获取到PaRes了：

• 如果用方案A（查询参数）：

  const searchParams = new URLSearchParams(window.location.search);
  const paRes = searchParams.get('PaRes');
  // 接下来用PaRes继续后续流程
  

• 如果用方案B（全局变量）：
  在后端渲染页面时，把PaRes嵌入到HTML的<script>标签里（注意转义防止XSS）：

  <script>
    window.paRes = '<%= paRes %>'; // 模板引擎语法，根据你的框架调整
  </script>
  

  前端直接使用window.paRes即可。

2. 为什么前端直接拿不到原始POST数据？ #

你可能会好奇，为什么浏览器的FormData对象拿不到值？原因很简单：

• 当SagePay发起POST请求到/make-payment时，浏览器会先向你的后端发送这个请求，拿到响应后渲染页面。
• 等你的前端JavaScript代码运行时，这次POST请求已经完成，浏览器没有保留原始的请求体数据供前端访问——前端只能访问当前页面的状态，无法回溯之前的请求内容。

所以这种场景下，前端直接获取是行不通的，必须通过后端中转。

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