CODEWITHSUNDEEP
javascriptajaxaxios
Carven
Carven

Reputation: 15648

How to prevent Axios from encoding my request parameters?

I'm trying to pass in an API key through the URL parameters in my GET request.

However, I notice that Axios encodes the characters in my API key when sending the request. This causes the API to reject my request as it couldn't recognise my key.

How can I prevent Axios from encoding my GET parameters?

Upvotes: 41

Views: 71076

Answers (3)

Caio
Caio

Reputation: 41

As marko424 answered, you also can do it globally on axios create:

import qs from 'qs'

const axios = axios.create({
    paramsSerializer: params => qs.stringify(params, { encode: false }),

})

this avoids you need to repeat the code in every axios call.

Upvotes: 1

marko424
marko424

Reputation: 5346

In case you are using qs library (or similar encoding lib) you can also do

import qs from 'qs';

axios.get('https://foobar.com/api', {
    params,
    paramsSerializer: (params) => qs.stringify(params, { encode: false }),
});

Upvotes: 4

Nick Uraltsev
Nick Uraltsev

Reputation: 25907

You can use a custom param serializer as follows:

axios.get('https://foobar.com/api', {
  paramsSerializer: function(params) {
    var result = '';
    // Build the query string 
    return result;
  }
});

paramsSerializer can be set at the instance level:

var instance = axios.create({ paramsSerializer: function(params) { /* ... */ } })

or at the global level:

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

Another option is to directly add the api key to the URL:

axios.get('https://foobar.com/api?api_key=' + key);

You can add additional parameters using the `params' config option:

axios.get('https://foobar.com/api?api_key=' + key, {
  params: {
    foo: 'bar'
  }
});

Upvotes: 35

Related Questions