Vue Axios query string escaping special characters

Question

I am facing a problem with Axios GET query string parameter when string includes "+" or "&" signs. I have tried using encodeURIComponent and I get

http://localhost:8001/api/data?page=1&paginate=20&term=S%2BM%20Company

When trying to query for S+M Company which is located as a value in the database table. Trying to query just a string without encoding it breaks after

http://localhost:8001/api/data?page=1&paginate=20&term=S+M.

The string is added to url from plain text field and the var is

url = url + &term=${this.search}

Any suggestions would be highly appreciated. Thanks!

user_7629020 · Answer

There is a built in helper for that:

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams

Use it like:

const data = {
  queryOne: 'value1',
  queryTwo: 'value2'
};

const myParams = new URLSearchParams(data);
myParams.toString()

user_11694756 · Answer

I had the same issue and the solution was to avoid adding the url params in the axios URL but doing so in the axios config object for params. For example:

export const getRequest = (dataToSendWithSpecialCharacters) => {
  const params = new URLSearchParams(dataToSendWithSpecialCharacters);
  return axios.get('/api/data', {
    params,
  });
};

Where dataToSendWithSpecialCharacters is an object with the keys/values that will work as appended params

{ term: 'value' } // &term=S+M Company

Vue Axios query string escaping special characters

2 Answers