How to set header and options in axios?

问题:

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)

回答1:

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

Do not forget to import axios library before making an ajax call with axios

回答2:

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

回答3:

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

回答4:

You can pass a config object to axios like:

axios({
  method: 'post',
  url: '....',
  params: {'HTTP_CONTENT_LANGUAGE': self.language},
  headers: {'header1': value}
})

回答5:

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)

回答6:

You can initialize a default header axios.defaults.headers

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