Axios发送请求时服务端收到的对象数组变为字符串数组如何解决

问题原因 #

Axios默认对GET请求的params参数采用内置的序列化规则，遇到嵌套对象结构时，会直接将对象转为[object Object]字符串，导致服务端接收到的数组实际为字符串数组，无法正常解析结构化数据。

可行解决方案 #

• 方案1：改用POST请求传参
  将参数放在请求体中传递，Axios会自动将JSON结构序列化为application/json格式的请求体，嵌套结构可以完整保留，服务端按JSON格式解析即可。
  代码示例：

  // 调整请求方法为POST，参数放在data字段
  api.Create({
    method: 'POST',
    data: data
  }).then(function (response) {
    console.log(response.data);
  })
  .catch(function (err) {
     console.log(err);
  });
  

• 方案2：自定义params序列化规则
  如果必须使用GET请求，可引入qs库处理参数序列化，该库支持复杂嵌套结构的格式化，可匹配服务端参数解析规则调整序列化格式。
  操作步骤：
  1. 安装qs库：npm install qs
  2. 调整请求配置，添加paramsSerializer配置项：

  import qs from 'qs'
  
  api.Create({
    params: data,
    paramsSerializer: (params) => {
      // arrayFormat可根据服务端解析规则调整为indices、repeat、comma等可选值
      return qs.stringify(params, { arrayFormat: 'brackets' })
    }
  }).then(function (response) {
    console.log(response.data);
  })
  .catch(function (err) {
     console.log(err);
  });
  

• 方案3：手动序列化复杂字段
  不想引入额外依赖的场景下，可手动将嵌套数组/对象转为JSON字符串传递，服务端接收后对对应字段做JSON反序列化即可。
  代码示例：

  let data = {
    title: 'Game',
    subject: 'Some subject',
    date: ['01/01/2021','01/01/2021'],
    years: ['1970', '1970'],
    address: 'None',
    // 手动序列化嵌套结构
    ages: JSON.stringify([
            {
              title: 'Men',
              weights: [{page: 0, title: '60'}]
            }
          ])
  };
  

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