Comment définir l'en-tête et les options dans axios?

160

J'utilise Axios pour effectuer une publication HTTP comme celle-ci:

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

Est-ce correct? Ou devrais-je faire:

axios.post(url, params: params, headers: headers)
user2950593
la source
3
Je me demande pourquoi vous avez accepté une mauvaise réponse!
Sirwan Afifi
@SirwanAfifi Il n'y a pas de réponse acceptée pour cette question
Tessaracter
2
@Tessaracter Le 13 mai 2019, il y avait une réponse acceptée avec un score de -78. Il a été pris en charge depuis lors.
jkmartindale
@jkmartindale Intéressant
Tessaracter

Réponses:

265

Il y a plusieurs moyens de le faire:

  • Pour une seule demande:

    let config = {
      headers: {
        header1: value,
      }
    }
    
    let data = {
      'HTTP_CONTENT_LANGUAGE': self.language
    }
    
    axios.post(URL, data, config).then(...)
    
  • Pour définir la configuration globale par défaut:

    axios.defaults.headers.post['header1'] = 'value' // for POST requests
    axios.defaults.headers.common['header1'] = 'value' // for all requests
    
  • Pour définir par défaut sur l'instance 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;
    });
    
riyaz-ali
la source
1
puis-je vous demander de jeter un oeil à une axiosquestion connexe ici: stackoverflow.com/questions/59470085/... ?
Istiaque Ahmed
141

Vous pouvez envoyer une requête get avec Headers (pour l'authentification avec jwt par exemple):

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

Vous pouvez également envoyer une demande de publication.

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

Ma façon de faire est de définir une requête comme celle-ci:

 axios({
  method: 'post', //you can set what request you want to be
  url: 'https://example.com/request',
  data: {id: varID},
  headers: {
    Authorization: 'Bearer ' + varToken
  }
})
roli roli
la source
1
Votre deuxième demande de publication ne fournit pas d'en-têtes spécifiques, pouvez-vous la modifier pour un exemple complet?
Striped
en utilisant datadans interceptors.request => il remplacera votre partie du corps actuall de l'appel spécifique que nous utilisons. Donc pas utilisé dans un tel cas.
Anupam Maurya
Devez-vous suivre cette norme de «Autorisation:« Porteur »+ jeton» ou pouvez-vous faire quelque chose comme Auth: jeton par exemple? Je n'utilise pas l'auth0 api mais fais le mien dans node, désolé si une question stupide est nouvelle pour jwt et les trucs de sécurité en général
Wiliam Cardoso
24

Vous pouvez passer un objet de configuration à axios comme:

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

Voici un exemple simple de configuration avec en-têtes et 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 peut être 'application / x-www-form-urlencoded' ou 'application / json' et cela peut aussi fonctionner 'application / json; charset = utf-8'

responseType peut être 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'

Dans cet exemple, this.data correspond aux données que vous souhaitez envoyer. Cela peut être une valeur ou un tableau. (Si vous souhaitez envoyer un objet, vous devrez probablement le sérialiser)

gtamborero
la source
Pouvez-vous expliquer la différence entre la définition des en-têtes avec ou sans le mot-clé config?
bubble-cord
1
L'utilisation d'une variable de configuration génère un code plus agréable et plus lisible; rien d'autre @ bubble-cord
gtamborero
14

Voici la bonne façon: -

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

Prateek Arora
la source
10

Vous pouvez initialiser un en-tête par défaut 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)
        })
Morris S
la source
9

si vous voulez faire une requête get avec des paramètres et des en-têtes.

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

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

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

Rishith Poloju
la source
2

essayez ce code

dans l'exemple de code, utilisez l'API axios get rest.

dans monté

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

L'espoir est de l'aide.

super-haut
la source
2

J'ai rencontré ce problème dans la demande de courrier . J'ai changé comme ça dans l'en-tête axios. Ça fonctionne bien.

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

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

Sethy Proem
la source