POST请求经TEMPORARY_REDIRECT重定向时添加POST数据，避免参数暴露

嘿，我来帮你搞定这个支付数据暴露的问题！你现在的核心需求是把补充后的支付数据通过POST方式传给支付服务，而不是暴露在URL里对吧？这里有几个靠谱的解决方案，按安全优先级给你列出来：

1. 服务器端转发（最安全，强烈推荐） #

这是支付场景下的最优解，因为敏感数据（比如商户ID、订单金额）完全不会暴露给前端。流程是这样的：

1. 用户提交仅含productId的表单到你的服务器接口
2. 服务器根据productId从数据库/配置中获取所有需要的支付参数
3. 服务器直接向支付服务发起POST请求，把完整数据传过去
4. 服务器把支付服务的响应（比如跳转URL）返回给前端，引导用户进入支付流程

举个Node.js（Express）的示例代码：

// 服务器端接口
app.post('/start-payment', async (req, res) => {
  const { productId } = req.body;
  
  // 从数据库获取对应产品的支付信息（这里模拟数据，实际从DB取）
  const productPaymentInfo = await getProductPaymentDetails(productId);
  
  // 组装完整的支付请求数据
  const paymentPayload = {
    productId: productId,
    amount: productPaymentInfo.price,
    merchantId: '你的商户ID',
    returnUrl: 'https://你的网站.com/支付成功页面',
    cancelUrl: 'https://你的网站.com/支付取消页面'
    // 其他支付服务要求的参数
  };

  try {
    // 向支付服务发起POST请求
    const paymentResponse = await fetch('https://支付服务地址/checkout', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded' // 或JSON，看支付服务要求
      },
      body: new URLSearchParams(paymentPayload) // JSON的话用JSON.stringify(paymentPayload)
    });

    // 假设支付服务返回跳转URL，直接重定向用户过去
    const redirectUrl = await paymentResponse.text();
    res.redirect(redirectUrl);
  } catch (error) {
    res.status(500).send('支付初始化失败，请稍后重试');
  }
});

前端的简单表单就提交到这个接口：

<form method="POST" action="/start-payment">
  <input type="hidden" name="productId" value="PROD-001">
  <button type="submit">立即购买</button>
</form>

2. 前端自动提交隐藏表单（适合轻量场景） #

如果暂时不想改服务器逻辑，也可以在前端处理：用户提交productId后，动态生成一个隐藏的表单，填充所有需要的支付参数，然后自动提交这个表单——这样数据是通过POST传输的，不会出现在URL里。

示例代码：

<!-- 用户可见的简单表单 -->
<form id="productForm">
  <input type="hidden" name="productId" value="PROD-001">
  <button type="submit">立即购买</button>
</form>

<script>
document.getElementById('productForm').addEventListener('submit', async (e) => {
  e.preventDefault(); // 阻止原表单的默认提交行为
  
  const productId = e.target.productId.value;
  // 这里可以通过API获取产品的其他支付参数（注意：敏感参数不建议从前端API获取）
  const productData = await fetch(`/api/products/${productId}`).then(res => res.json());

  // 创建隐藏的支付表单
  const paymentForm = document.createElement('form');
  paymentForm.method = 'POST';
  paymentForm.action = 'https://支付服务地址/checkout';
  paymentForm.style.display = 'none';

  // 填充所有支付参数
  const paymentParams = {
    productId: productId,
    amount: productData.price,
    merchantId: '你的商户ID',
    returnUrl: 'https://你的网站.com/支付成功页面'
  };

  Object.entries(paymentParams).forEach(([key, value]) => {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = key;
    input.value = value;
    paymentForm.appendChild(input);
  });

  // 添加到页面并自动提交
  document.body.appendChild(paymentForm);
  paymentForm.submit();
});
</script>

⚠️ 注意：这个方法的缺点是敏感参数会出现在前端代码/开发者工具中，所以如果涉及商户密钥、订单金额这类不能泄露的信息，还是优先用服务器端方案。

3. 用Fetch/Axios发起POST请求 #

如果支付服务支持返回JSON格式的响应（而不是直接跳转），你也可以用前端直接发起POST请求，然后根据响应跳转到支付页面：

document.getElementById('productForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const productId = e.target.productId.value;

  const paymentPayload = {
    productId: productId,
    amount: '99.99',
    merchantId: '你的商户ID'
  };

  try {
    const response = await fetch('https://支付服务地址/checkout', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(paymentPayload)
    });

    const result = await response.json();
    if (result.success) {
      // 跳转到支付服务的页面
      window.location.href = result.paymentUrl;
    } else {
      alert('支付初始化失败：' + result.message);
    }
  } catch (error) {
    alert('网络错误，请稍后重试');
  }
});

同样，敏感参数的暴露问题需要注意，不建议在前端直接处理机密信息。

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