Come impostare l'intestazione e le opzioni in axios?


160

Uso Axios per eseguire un post HTTP come questo:

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

È corretto? O dovrei fare:

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

3
Mi chiedo perché hai accettato una risposta sbagliata!
Sirwan Afifi,

@SirwanAfifi Non c'è una risposta accettata per questa domanda
Tessaracter

2
@Tessaracter Il 13 maggio 2019 è stata accettata una risposta con un punteggio di -78. Da allora è stato curato.
jkmartindale,

@jkmartindale Interessante
Tessaracter

Risposte:


265

Esistono diversi modi per farlo:

  • Per una singola richiesta:

    let config = {
      headers: {
        header1: value,
      }
    }
    
    let data = {
      'HTTP_CONTENT_LANGUAGE': self.language
    }
    
    axios.post(URL, data, config).then(...)
  • Per impostare la configurazione globale predefinita:

    axios.defaults.headers.post['header1'] = 'value' // for POST requests
    axios.defaults.headers.common['header1'] = 'value' // for all requests
  • Per l'impostazione predefinita sull'istanza axios:

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

1
posso chiederti di dare un'occhiata a una axiosdomanda correlata qui: stackoverflow.com/questions/59470085/… ?
Istiaque Ahmed,

141

Puoi inviare una richiesta get con Headers (ad esempio per l'autenticazione con jwt):

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

Inoltre puoi inviare una richiesta di posta.

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

Il mio modo di farlo è impostare una richiesta come questa:

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

1
La tua seconda richiesta di post non fornisce intestazioni specifiche, puoi modificarla per un esempio completo?
Strisce il

usando datain interceptors.request => sostituirà la parte del tuo corpo intero dalla chiamata specifica che stiamo usando. Quindi non utilizzato in tal caso.
Anupam Maurya,

Devi seguire questo standard di "Autorizzazione:" Portatore "+ token" o puoi fare qualcosa come Auth: token per esempio? Non sto usando auth0 api ma sto facendo il mio nel nodo, scusate se stupida domanda nuova su jwt e roba di sicurezza in generale
Wiliam Cardoso,

24

Puoi passare un oggetto config ad axios come:

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

16

Questo è un semplice esempio di una configurazione con intestazioni e 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 può essere 'application / x-www-form-urlencoded' o 'application / json' e può funzionare anche 'application / json; charset = utf-8'

responseType può essere 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'

In questo esempio, this.data sono i dati che si desidera inviare. Può essere un valore o una matrice. (Se vuoi inviare un oggetto, probabilmente dovrai serializzarlo)


Puoi spiegare la differenza tra impostare le intestazioni con la nostra senza la parola chiave config?
Bubble-cord

1
L'uso di una variabile di configurazione genera un codice più bello e più leggibile; nient'altro @ bubble-cord
gtamborero

14

Ecco il modo giusto: -

axios.post('url', {"body":data}, {
    headers: {
    'Content-Type': 'application/json'
    }
  }
)


10

È possibile inizializzare un'intestazione predefinita 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)
        })

9

se vuoi fare una richiesta get con parametri e header.

var params = {
  paramName1: paramValue1,
  paramName2: paramValue2
}

var headers = {
  headerName1: headerValue1,
  headerName2: headerValue2
}

 Axios.get(url, {params, headers} ).then(res =>{
  console.log(res.data.representation);
});


2

prova questo codice

nell'esempio usare il codice axios get rest API.

in montato

  mounted(){
    var config = {
    headers: { 
      'x-rapidapi-host': 'covid-19-coronavirus-statistics.p.rapidapi.com',
      'x-rapidapi-key': '5156f83861mshd5c5731412d4c5fp18132ejsn8ae65e661a54' 
      }
   };
   axios.get('https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/stats? 
    country=Thailand',  config)
    .then((response) => {
    console.log(response.data);
  });
}

La speranza è di aiuto


2

Ho affrontato questo problema nella richiesta post . Sono cambiato in questo modo nell'intestazione degli assi. Funziona bene

axios.post('http://localhost/M-Experience/resources/GETrends.php',
      {
        firstName: this.name
      },
      {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      });

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.