Node 16.x中Axios替代request发送POST表单数据至REST端点失败

问题场景 #

在Node 16.15.x应用中用最新版Axios替代已废弃的request包时，某POST请求无法正确提交表单数据。原request代码可成功获取令牌，但Axios实现返回200状态码却提示参数不全的错误。

原request工作代码 #

request.post('https://sampleserver6.arcgisonline.com/arcgis/tokens/generateToken', {
    form: {
        'username': 'user1',
        'password': 'user1',
        'client': 'requestip',
        'expiration': 60,
        'f': 'json',
    }
}, (err, response, body) => {
    console.log('****Token', body)
})

Axios问题代码 #

axios.post('https://sampleserver6.arcgisonline.com/arcgis/tokens/generateToken', {
        'username': 'user1',
        'password': 'user1',
        'client': 'requestip',
        'expiration': 60,
        'f': 'json',
    }, {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
    })
    .then(function(response) {
        console.log('****Token', body)
    })

报错信息 #

Invalid request Usage: https://sampleserver6.arcgisonline.com/arcgis/tokens?request=gettoken&username=username&password=password&

问题原因 #

request的form选项会自动将对象编码为application/x-www-form-urlencoded格式的表单数据，而Axios默认会把传入的JavaScript对象序列化为JSON格式。即使手动设置了Content-Type头，Axios也不会自动将对象转换为表单编码格式，导致服务器无法解析到正确的参数。

另外，原Axios代码的then回调中直接使用body是错误的，Axios的响应数据需要通过response.data获取。

解决方案 #

方案1：使用URLSearchParams构造表单数据 #

Node.js内置URLSearchParams，可直接用来构造符合要求的表单数据：

const axios = require('axios');

const params = new URLSearchParams();
params.append('username', 'user1');
params.append('password', 'user1');
params.append('client', 'requestip');
params.append('expiration', 60);
params.append('f', 'json');

axios.post('https://sampleserver6.arcgisonline.com/arcgis/tokens/generateToken', params)
  .then(function(response) {
    console.log('****Token', response.data);
  })
  .catch(function(error) {
    console.error(error);
  });

方案2：使用qs库序列化对象 #

先安装qs库：

npm install qs

然后修改Axios代码：

const axios = require('axios');
const qs = require('qs');

axios.post('https://sampleserver6.arcgisonline.com/arcgis/tokens/generateToken', qs.stringify({
  'username': 'user1',
  'password': 'user1',
  'client': 'requestip',
  'expiration': 60,
  'f': 'json',
}), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  }
})
.then(function(response) {
  console.log('****Token', response.data);
})
.catch(function(error) {
  console.error(error);
});

两种方案都能将数据正确编码为表单格式，让服务器正常解析参数，从而成功获取令牌。

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