使用Axios向支付引擎提交表单失败问题排查

我有一个基于React/Node.js的网站，因request.post已废弃，正重构为使用axios.post向支付引擎提交表单。但使用axios.post时参数提交/编码不正确，支付引擎无法返回支付页面的跳转地址（location头为空），而原request.post可以正常工作。

测试表单（可正常提交） #

<form method="post" action="https://secure.wayforpay.com/pay" accept-charset="utf-8">
  <input name="merchantAccount" value="test_merch_n1">
  <input name="merchantAuthType" value="SimpleSignature">
  <input name="merchantDomainName" value="www.market.ua">
  <input name="orderReference" value="DH1720520981">
  <input name="orderDate" value="1415379863">
  <input name="amount" value="1547.36">
  <input name="currency" value="UAH">
  <input name="orderTimeout" value="49000">
  <input name="productName[]" value="Процессор Intel Core i5-4670 3.4GHz">
  <input name="productName[]" value="Память Kingston DDR3-1600 4096MB PC3-12800">
  <input name="productPrice[]" value="1000">
  <input name="productPrice[]" value="547.36">
  <input name="productCount[]" value="1">
  <input name="productCount[]" value="1">
  <input name="clientFirstName" value="Вася">
  <input name="clientLastName" value="Пупкин">
  <input name="clientAddress" value="пр. Гагарина, 12">
  <input name="clientCity" value="Днепропетровск">
  <input name="clientEmail" value="some@mail.com">
  <input name="defaultPaymentSystem" value="card">
  <input name="merchantSignature" value="35340784620809a3b85c1f1f11023c40">
  <input type="submit" value="Test">
</form>

现有Axios代码 #

const data = {
  merchantAccount: "test_merch_n1",
  merchantAuthType: "SimpleSignature",
  merchantDomainName: "www.market.ua",
  orderReference: "DH1720514976",
  orderDate: "1415379863",
  amount: "1547.36",
  currency: "UAH",
  orderTimeout: "49000",
  productName: ["Процессор Intel Core i5-4670 3.4GHz", "Память Kingston DDR3-1600 4096MB PC3-12800"],
  productPrice: ["1000", "547.36"],
  productCount: ["1", "1"],
  clientFirstName: "Вася",
  clientLastName: "Пупкин",
  clientAddress: "пр. Гагарина, 12",
  clientCity: "Днепропетровск",
  clientEmail: "some@mail.com",
  defaultPaymentSystem: "card",
  merchantSignature: "5c287e8fb6a3ade049864c8838f8af41"
};

const wfpPaymentPageRes = await axios.post("https://secure.wayforpay.com/pay", data, {
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
    "Accept-Charset": "utf-8"
  }
});

console.log("wfpPaymentPageRes.headers.location: ", wfpPaymentPageRes.headers.location);
return res.json(wfpPaymentPageRes.headers.location);

执行结果 #

wfpPaymentPageRes.headers.location: undefined

我找不到问题原因，为何request.post能正常工作但axios.post不行？

解决方案 #

问题出在Axios对数组参数的默认编码方式上：

• 当设置Content-Type: application/x-www-form-urlencoded时，Axios默认会把数组编码为productName=xxx,yyy这种逗号分隔的格式，而支付引擎需要的是原生表单提交的productName[]=xxx&productName[]=yyy格式。
• request库默认会自动处理数组，生成符合表单要求的编码格式，所以能正常工作。

解决步骤：

1. 安装qs库（专门处理URL参数序列化的工具）：

npm install qs

2. 使用qs.stringify序列化数据，并指定arrayFormat: 'brackets'来生成带方括号的数组参数格式：

const qs = require('qs');
const data = { /* 原数据不变 */ };

const wfpPaymentPageRes = await axios.post(
  "https://secure.wayforpay.com/pay",
  qs.stringify(data, { arrayFormat: 'brackets' }), // 关键：用qs正确序列化数组
  {
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      "Accept-Charset": "utf-8"
    }
  }
);

这样提交的参数格式就和原生表单完全一致，支付引擎就能正确识别并返回跳转地址了。

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