Il existe en fait plusieurs façons d'envoyer des en-têtes HTTP avec Axios. Par exemple, vous pouvez utiliser un objet de configuration comme décrit ici, ou vous pouvez utiliser les méthodes d'instance, qui fusionneront automatiquement la configuration que vous passez avec la configuration de l'instance. Vous pouvez également utiliser l'objet `axios.defaults.headers.common` pour définir des en-têtes par défaut pour toutes les requêtes Axios.
Notez également qu’Axios est un client HTTP basé sur les promesses. Cela signifie que nous devrons soit l’attendre à l’intérieur d’une fonction asynchrone, soit résoudre la réponse.
En gardant ces deux aspects à l'esprit, commençons par un peu de code concret. Nous allons travailler dans le fichier « index.js ». Pour plus de commodité, récapitulons ce que nous devons faire au préalable :
- Importer `axios` dans notre fichier
- Définir un objet de configuration qui contiendra nos en-têtes
- Transmettre la configuration à `axios` afin d’effectuer une requête
- Afficher la réponse dans notre terminal
#1 : Envoyer une requête GET à l'aide de l'objet de configuration
import axios from "axios"
const config = {
method: 'GET',
url: 'https://httpbin.org/headers',
headers: {
'HTTP-Axios-Headers': 'This is my custom header.'
}
}
axios(config)
.then((response) => {
console.log(response)
})
.catch((err) => {
console.log(err)
})
L'envoi d'en-têtes HTTP avec Axios est on ne peut plus simple. Pour exécuter ce script, il suffit de lancer la commande suivante dans votre terminal :
~ » node index.js
{
status: 200,
statusText: 'OK',
headers: ...,
config: ...,
request: ...,
data: {
headers: {
'Accept': 'application/json, text/plain, */*',
'Accept-Encoding': 'gzip, compress, deflate, br',
'Host': 'httpbin.org',
'Http-Axios-Headers': 'This is my custom header.',
'User-Agent': 'axios/1.2.2',
'X-Amzn-Trace-Id': 'Root=1-63b54d94-7656f02113483dfa036c476c'
}
}
}
La réponse complète est assez volumineuse et suit ce schéma. Cependant, ce qui nous intéresse principalement, ce sont les `données`, qui contiennent la réponse réelle que nous avons reçue du serveur. Examinez maintenant la réponse ci-dessus. Rappelez-vous que nous avons envoyé un en-tête personnalisé `Http-Axios-Headers` au serveur et, comme vous pouvez le voir, le serveur l'a bien reçu.
#2 : Envoyer une requête POST à l'aide de l'alias de méthode
import axios from "axios"
const data = {
'foo':'bar'
}
const config = {
headers: {
'HTTP-Axios-Headers': 'This is my custom header.'
}
}
axios.post('http://httpbin.org/post', data, config)
.then(response => console.log(response.data))
.catch(err => console.log(err))
Remarquez que pour envoyer une requête POST, j'ai ajouté un nouvel objet `data` à notre script et j'ai également modifié l'URL. À présent, si vous exécutez le script, vous constaterez que voici les données reçues du serveur :
{
args: {},
data: '{"foo":"bar"}',
files: {},
form: {},
headers: {
Accept: 'application/json, text/plain, */*',
'Accept-Encoding': 'gzip, compress, deflate, br',
'Content-Length': '13',
'Content-Type': 'application/json',
Host: 'httpbin.org',
'Http-Axios-Headers': 'This is my custom header.',
'User-Agent': 'axios/1.2.2',
'X-Amzn-Trace-Id': 'Root=1-63b5508a-3a86493f087662d3169e80ee'
},
json: { foo: 'bar' },
origin: '49.12.221.20',
url: 'http://httpbin.org/post'
}
