axios为请求param添加括号[]

Question

我正在尝试添加项目列表作为请求参数。当我手动编写这样的 URL 时：http://localhost:8080/api/user/book/?keyword=&page=1&pageSize=5&field=id&order=ascend&author=aziz&author=nazim，我得到了我想要的。

然而，axios 坚持毫无意义地添加方括号。

const _fetchBooks = async (params) => {
        const url = `${UrlUtil.userURL()}/book/`;

        const response = await axios.get(url, {
            params: {
                keyword: params.search,
                page: params.pagination.current,
                pageSize: params.pagination.pageSize,
                field: params.sorter?.field,
                order: params.sorter?.order,
                author: params.filter?.author,
            },
       ...
    };

这是我进行过滤时 React 尝试到达的结果 URL： http://localhost:8080/api/user/book/?keyword=&page=1&pageSize=5&field=id&order=ascend&author[]=aziz&author[]=nazim

有了括号，我无法继续，因为我遇到了异常：

java.lang.IllegalArgumentException: Invalid character found in the request target [/api/user/book/keyword=&page=1&pageSize=5&field=id&order=ascend&author[]=aziz&author[]=nazim ]. The valid characters are defined in RFC 7230 and RFC 3986

所以，Java 不喜欢括号。

Answer 1

正如 @AndyRay 在评论中所说，这不是 React 做的，而是 Axios 做的。这是其 API 记录的标准行为。您可以使用paramsSerializer 选项更改数组序列化的方式：

const response = await axios.get(url, {
  params: {
    keyword: params.search,
    page: params.pagination.current,
    pageSize: params.pagination.pageSize,
    field: params.sorter?.field,
    order: params.sorter?.order,
    author: params.filter?.author,
  },
  paramsSerializer: { indexes: null }
});