Axios Adds Brackets [] To Request Param

Question

I'm trying to add a list of items as a request parameter. When I manually write the URL like that: http://localhost:8080/api/user/book/?keyword=&page=1&pageSize=5&field=id&order=ascend&author=aziz&author=nazim, I get what I want.

However, Axios insists on adding square brackets pointlessly.

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,
            },
       ...
    };

Here's the result URL React trying to reach when I do filtering: http://localhost:8080/api/user/book/?keyword=&page=1&pageSize=5&field=id&order=ascend&author[]=aziz&author[]=nazim

With the brackets, I cannot go on because I get an exception:

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

So, Java doesn't like the brackets.

Answer 1

As @AndyRay said in the comment, it's not React doing this, its Axios. This is standard behaviour as documented by their API. You can change the way that arrays get serialized using paramsSerializer option:

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 }
});