How to set header and options in axios?

How to set header and options in axios?

Asked on January 21, 2019 in vue.js.
Add Comment


  • 9 Answer(s)

    This is a simple example of a configuration with headers and responseType:

    var config = {
    headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ },
    responseType: ‘blob’
    };

    axios.post(‘http://YOUR_URL’, this.data, config)
    .then((response) => {
    console.log(response.data);
    });
    Content-Type can be ‘application/x-www-form-urlencoded’ or ‘application/json’ and it may work also ‘application/json;charset=utf-8’

    responseType can be ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’

    In this example, this.data is the data you want to send. It can be a value or an Array. (If you want to send an object you’ll probably have to serialize it)

    Answered on January 24, 2019.
    Add Comment

    I use axios to perform a HTTP post like this:

    import axios from ‘axios’
    params = {‘HTTP_CONTENT_LANGUAGE’: self.language}
    headers = {‘header1’: value}
    axios.post(url, params, headers)
    Is this correct? Or should I do:

    axios.post(url, params: params, headers: headers)

    Answered on January 27, 2019.
    Add Comment
    var authOptions = {
        method: 'POST',
        url: 'http://10.254.147.184:7777/auth/oauth/token',
        data: qs.stringify(data),
        headers: {
            'Authorization': 'Basic Y2xpZW50OnNlY3JldA==',
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        json: true
      };
      return dispatch => {
        return axios(authOptions)
        .then(function(response){
          console.log(response.data);
          console.log(response.status);
        })
        .catch(function(error){
          console.log(error);
        });
    Answered on January 28, 2019.
    Add Comment

    Axios can be used in any of the following ways:

    // Make a request for a user with a given ID
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    
    // Optionally the request above could also be done as
    axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    

    then for a post request:

    axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    
    Answered on February 2, 2019.
    Add Comment
     var authOptions = {
        method: 'POST',
        url: 'http://10.254.147.184:7777/auth/oauth/token',
        data: qs.stringify(data),
        headers: {
            'Authorization': 'Basic Y2xpZW50OnNlY3JldA==',
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        json: true
      };
      return dispatch => {
        return axios(authOptions)
        .then(function(response){
          console.log(response.data);
          console.log(response.status);
        })
        .catch(function(error){
          console.log(error);
        });
    Answered on February 4, 2019.
    Add Comment

    There are several ways to do this:

    1.For a single request:

    let config = {
    headers: {
    header1: value,
    }
    }

    let data = {
    ‘HTTP_CONTENT_LANGUAGE’: self.language
    }

    axios.post(URL, data, config).then(…)
    For setting default global config:

    axios.defaults.headers.post[‘header1’] = ‘value’ // for POST requests
    axios.defaults.headers.common[‘header1’] = ‘value’ // for all requests
    2.For setting as default on axios instance:

    let instance = axios.create({
    headers: {
    post: { // can be common or any other method
    header1: ‘value1’
    }
    }
    })

    //- or after instance has been created
    instance.defaults.headers.post[‘header1’] = ‘value’

    //- or before a request is made
    // using Interceptors
    instance.interceptors.request.use(config => {
    config.headers.post[‘header1’] = ‘value’;
    return config;
    });

    Answered on February 5, 2019.
    Add Comment

    There are several ways to do this:

    • For a single request:
      let config = {
        headers: {
          header1: value,
        }
      }
      
      let data = {
        'HTTP_CONTENT_LANGUAGE': self.language
      }
      
      axios.post(URL, data, config).then(...)
      
    • For setting default global config:
      axios.defaults.headers.post['header1'] = 'value' // for POST requests
      axios.defaults.headers.common['header1'] = 'value' // for all requests
      
    • For setting as default on axios instance:
      let instance = axios.create({
        headers: {
          post: {        // can be common or any other method
            header1: 'value1'
          }
        }
      })
      
      //- or after instance has been created
      instance.defaults.headers.post['header1'] = 'value'
      
      //- or before a request is made
      // using Interceptors
      instance.interceptors.request.use(config => {
        config.headers.post['header1'] = 'value';
        return config;
      });
      
    Answered on February 5, 2019.
    Add Comment
    axios.defaults.headers = {
            'Content-Type': 'application/json',
            Authorization: 'myspecialpassword'
        }
    
       axios.post('https://myapi.com', { data: "hello world" })
            .then(response => {
                console.log('Response', response.data)
            })
            .catch(e => {
                console.log('Error: ', e.response.data)
            })
    Answered on February 5, 2019.
    Add Comment

    You can send a get request with Headers (for authentication with jwt for example):

    axios.get('https://example.com/getSomething', {
     headers: {
       Authorization: 'Bearer ' + token //the token is a variable which holds the token
     }
    })
    

    Also you can send a post request.

    axios.post('https://example.com/postSomething', {
     email: varEmail, //varEmail is a variable which holds the email
     password: varPassword
    },
    {
      headers: {
        Authorization: 'Bearer ' + varToken
      }
    })
    

    My way of doing it,is to set a request like this:

     axios({
      method: 'post', //you can set what request you want to be
      url: 'https://example.com/request',
      data: {id: varID},
      headers: {
        Authorization: 'Bearer ' + varToken
      }
    })
    Answered on February 20, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.