axios.get传递数组作为params参数时后端无法通过req.query直接取值问题

问题根源 #

axios默认序列化数组类型的query参数时，会自动给参数名追加[]后缀，后端的查询字符串解析器如果没有开启对应解析规则，就会把secondFilter[]当成完整的键名存储，导致无法直接通过secondFilter取值。

可选解决方案 #

方案1：前端修改axios参数序列化规则

修改请求的paramsSerializer配置，使用axios内置的qs依赖自定义数组序列化格式，避免生成[]后缀：

const res = await axios.get("http://localhost:3000/getsomedata", {
  params: {
    firstFilter: someObject,
    secondFilter: [someOtherObject, someOtherObject]
  },
  // 自定义参数序列化规则
  paramsSerializer: (params) => {
    return qs.stringify(params, { arrayFormat: 'repeat' })
  }
});

设置arrayFormat: 'repeat后，数组参数会被序列化为secondFilter=值1&secondFilter=值2的格式，后端可直接通过req.query.secondFilter获取数组。

方案2：后端开启查询字符串数组解析规则

如果不想修改前端代码，可以直接调整后端的查询字符串解析配置，以常用的Express框架为例：

const express = require('express')
const app = express()
// 配置query解析为extended模式，自动识别带[]后缀的参数为数组，去掉后缀作为键名
app.set('query parser', 'extended')

配置完成后，后端会自动把secondFilter[]的参数值挂载到req.query.secondFilter，无需手动转换。

额外建议 #

如果参数是复杂对象/数组，更推荐使用POST请求把参数放到请求体中传递，既可以避免GET请求的长度限制，也不需要额外处理序列化规则。

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