Goal

I want to pass query params for a GET request using axios. The param value is a variable of type string and has whitespace.

Problem

It seems axios is encoding the param in a format that my backend does not understand. I have done research on axios encoding and it appears axios encodes whitespace to a + and not %20.

Example

Let's say you have this request:

 const whitespace = "white space";
 const encodeWhitespace = encodeURI(whitespace);
 const noSpace = "no";

 axios.get('/api', {
   params: {
     'foo': 'bar',
     'bar': 'hello world',
     'space': whitespace,
     'encode': 'hello%20world', 
     'encoded': encodeWhitespace,
     'simple': noSpace
   }
}

The params foo, bar, encode, simple all work and generate a response with the correct data. The params space, encoded do not generate the correct data. The request is successful with 200 but returns no data.

I created the same request in Postman with the same queries to see if the GET returns the expected result and it does. I added the %20 in Postman and it returns just fine. I added the + in Postman and that returns the expected result as well.

Question

What might be going wrong with the variable implementation? I can't do it without the variable like the bar param because the value is being passed to a function (Redux action). Any ideas or thoughts on this would be helpful. Please comment if more information is needed.

Goal

I want to pass query params for a GET request using axios. The param value is a variable of type string and has whitespace.

Problem

It seems axios is encoding the param in a format that my backend does not understand. I have done research on axios encoding and it appears axios encodes whitespace to a + and not %20.

Example

Let's say you have this request:

 const whitespace = "white space";
 const encodeWhitespace = encodeURI(whitespace);
 const noSpace = "no";

 axios.get('/api', {
   params: {
     'foo': 'bar',
     'bar': 'hello world',
     'space': whitespace,
     'encode': 'hello%20world', 
     'encoded': encodeWhitespace,
     'simple': noSpace
   }
}

The params foo, bar, encode, simple all work and generate a response with the correct data. The params space, encoded do not generate the correct data. The request is successful with 200 but returns no data.

I created the same request in Postman with the same queries to see if the GET returns the expected result and it does. I added the %20 in Postman and it returns just fine. I added the + in Postman and that returns the expected result as well.

Question

What might be going wrong with the variable implementation? I can't do it without the variable like the bar param because the value is being passed to a function (Redux action). Any ideas or thoughts on this would be helpful. Please comment if more information is needed.

• javascript
• react-redux
• axios

• Possible duplicate stackoverflow.com/questions/39116731/… – marko424 Commented Feb 11, 2022 at 8:43
• 1 Thank you @marko424. Should I just close this one? – Bens Steves Commented Mar 15, 2022 at 1:09
• yes I think we could close this one – marko424 Commented May 6, 2022 at 19:44

1 Answer 1

Seems like this is an issue (or the default parameter serialization behavior) of Axios library.

So to overcome this, you have 2 options.

1. Define your query params in the URL itself

const whitespace = "white space";
axios.get(`/api?space=${whitespace}`);

2. Write your own paramsSerializer to build the query string.

const whitespace = "white space";
const encodeWhitespace = encodeURI(whitespace);
const noSpace = "no";

axios.get('/api', {
    params: {
        'foo': 'bar',
        'bar': 'hello world',
        'space': whitespace,
        'simple': noSpace
    },
    paramsSerializer: (params) => {
        // Sample implementation of query string building
        let result = '';
        Object.keys(params).forEach(key => {
            result += `${key}=${encodeURIComponent(params[key])}&`;
        });
        return result.substring(0, result.length - 1);
    }
});

Note: The above paramsSerializer can be defined in the global level or Axios instance level as well.

• Global level

axios.defaults.paramsSerializer = (params) => { /* ... */ };

• Instance level

let axInstance = axios.create({ paramsSerializer: (params) => { /* ... */ } })