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.

Is `params.filter?.author` an array? If so, it might cause issues. — sean-7777, Aug 23 '22 at 23:09
Yes, it is an array of String, but it needs to be. Because users can filter multiple authors. — Umut Emre Önder, Aug 23 '22 at 23:12
You could try manually formatting the string, like `params.filter?.author.join(",")`. Depends on how your backend API works. — sean-7777, Aug 23 '22 at 23:13
just to note it's not react adding the array, params.filter.author is an array so js in general would be doing this regardless — Rob Terrell, Aug 23 '22 at 23:27
React and axios are different things, and that's a standard way to encode array values in a URL. — Andy Ray, Aug 23 '22 at 23:29

score 4 · Accepted Answer · answered Aug 23 '22 at 23:33

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

score 0 · Answer 2 · answered Aug 24 '22 at 06:42

as I can understand your issue of Invalid character found

I suggest you to read this first:

What's valid and what's not in a URI query?

To solve this issue of using invalid characters such as "[" you need to encode the url params and to do so check this fuction:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

Example:

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: encodeURIComponent(JSON.stringify(params.filter?.author)),
            },
       ...
    };

Best of luck ...

Axios Adds Brackets [] To Request Param

2 Answers2