Axios自动为请求参数添加方括号致Java服务报错求助

问题原因 #

Axios默认会将数组类型的请求参数序列化为key[]=value格式，但Java后端（如Spring、Tomcat环境）默认期望多值参数以重复键名的形式传递（即key=value&key=value），且方括号[]属于RFC规范外的URL字符，会触发Tomcat等容器的请求合法性校验，抛出IllegalArgumentException异常。

解决方案 #

1. 配置Axios参数序列化器（推荐）

利用Axios依赖的qs库，修改数组参数的序列化规则为repeat模式，直接生成重复键名的参数格式：

import axios from 'axios';
import qs from 'qs';

// 创建自定义Axios实例
const axiosInstance = axios.create({
  paramsSerializer: (params) => {
    return qs.stringify(params, { arrayFormat: 'repeat' });
  }
});

// 发送请求时直接传入数组参数
axiosInstance.get('/api/user/book/', {
  params: {
    keyword: '',
    page: 1,
    pageSize: 5,
    field: 'id',
    order: 'ascend',
    author: ['aziz', 'nazim']
  }
});

此方式生成的URL会和你手动构造的一致：...&author=aziz&author=nazim，完全兼容后端要求。

2. 手动处理参数（无需额外依赖）

如果不想显式引入qs（Axios内部已集成该库，无需额外安装），可以手动将数组转换为重复键值对：

const baseParams = {
  keyword: '',
  page: 1,
  pageSize: 5,
  field: 'id',
  order: 'ascend'
};

// 处理多值参数
const authors = ['aziz', 'nazim'];
authors.forEach(author => {
  baseParams.author = baseParams.author 
    ? [...baseParams.author, author] 
    : author;
});

axios.get('/api/user/book/', { params: baseParams });

3. 后端临时兼容（不推荐）

若后端允许修改配置，可调整Tomcat的参数校验规则，在server.xml的Connector节点添加relaxedQueryChars="[]"，允许方括号作为合法查询字符：

<Connector port="8080" protocol="HTTP/1.1"
           connectionTimeout="20000"
           redirectPort="8443"
           relaxedQueryChars="[]"/>

注意：此方法仅为临时绕过校验，不符合URL规范，优先推荐前端修改序列化方式。

内容的提问来源于stack exchange，提问作者Umut Emre Önder