Axios set header authorization bearer

de requête Note de l’éditeur : Cet article a été mis à jour pour la dernière fois par Carlos Mucuho le 4 novembre 2024 pour introduire l’injection d’en-tête dynamique basée sur les rôles, ainsi que la façon de gérer les requêtes non sécurisées avec Axios.

Les en-têtes de requête HTTP sont des composants essentiels des communications Web, contenant des métadonnées cruciales sur la requête effectuée. Ils fournissent des informations sur les ressources demandées, le client qui effectue la demande et les détails d’authentification. Lors d’appels d’API, des en-têtes de requête correctement configurés garantissent une communication sécurisée et efficace entre le client et le serveur.

Les en-têtes de réponse HTTP, renvoyés par le serveur, contiennent des informations importantes sur la réponse, telles que le type de contenu, les directives de mise en cache et les stratégies de sécurité. Ils aident les clients à comprendre comment traiter les données reçues et à gérer Connexions sécurisées.

Dans cet article, nous allons nous plonger dans la définition des en-têtes de requête avec Axios, un puissant client HTTP pour les navigateurs et les environnements Node.js. Nous explorerons différentes approches pour configurer les en-têtes, de la simple demande ponctuelle à la gestion dynamique complexe des en-têtes, en veillant à ce que vos applications communiquent efficacement avec les services backend.

Installation d’Axios

Vous pouvez installer Axios à l’aide des gestionnaires de paquets Node populaires, notamment les suivants :

// via npm npm install axios // via yarn ajouter axios // via bower bower install axios // via pnpm pnpm add axios

Il est également possible de charger Axios directement dans le navigateur via les et CDN :

// via jsdelivr <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> // via unpkg <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Une fois que vous avez installé Axios, vous pouvez Importez-le dans votre application comme suit :

Importez Axios à partir de 'Axios' ;

Définition globale des en-têtes par rapport à Par requête

En raison du comportement sans état du protocole HTTP, les en-têtes sont généralement envoyés pour chaque message HTTP. Ainsi, Axios vous offre un moyen de définir des en-têtes par requête lorsque vous effectuez une nouvelle requête à l’aide de son API.

Par exemple, si vous envoyez une nouvelle demande au point de terminaison, vous pouvez définir un en-tête personnalisé uniquement pour cette demande particulière. Si vous envoyez une autre demande à , Axios n’ajoutera pas automatiquement l’en-tête personnalisé que vous avez envoyé pour le point de terminaison. Nous pouvons les appeler des en-têtes par requête, car ils ne sont ajoutés que pour une requête particulière.

Les en-têtes globaux Axios sont envoyés pour plusieurs requêtes, même si vous ne les mentionnez pas explicitement dans chacune d’elles. Par exemple, vous pouvez configurer Axios pour qu’il configure un en-tête global personnalisé pour tous les points de terminaison. L’attachement de l’en-tête à toutes les demandes sortantes est Une utilisation populaire des en-têtes globaux.

Nous pouvons utiliser la configuration de requête Axios pour définir des en-têtes par requête, et la configuration globale, les instances et les intercepteurs Axios pour définir les en-têtes globaux, comme expliqué dans les sections suivantes.

Définir des en-têtes par requête

Les méthodes Axios telles que , , , etc., nous permettent d’attacher des en-têtes à une requête spécifique en attachant un objet dans la configuration de la requête Axios. Par exemple, vous pouvez définir des en-têtes personnalisés pour une seule requête en utilisant l’approche suivante :

axios.get('/users', { headers : { 'MyCustomHeader1' : '1', 'MyCustomHeader2' : '2' } }) .then((res) => console.log(res.data)) .catch((err) => console.error(err)) ;

Dans l’exemple ci-dessus, nous avons passé la chaîne de point de terminaison de l’API au premier paramètre et l’objet de configuration Axios au deuxième paramètre.

Avec les requêtes, nous devons passer des données en utilisant le deuxième paramètre, nous devons donc envoyer l’objet du troisième paramètre de configuration, comme illustré ici :

const data = { customerId : 100, items : [] } ; axios.post('/invoices', data, { headers : { 'MyCustomHeader1' : '1', 'MyCustomHeader2' : '2' } }) .then((res) => console.log(res.data)) .catch((err) => console.error(err)) ;

Dans l’exemple ci-dessus, nous avons passé la chaîne de point de terminaison de l’API avec le premier paramètre, l’objet via le deuxième paramètre et l’objet de configuration Axios avec des en-têtes personnalisés via le troisième paramètre.

Définition des en-têtes avec la configuration globale d’Axios

Parfois, il peut être nécessaire de définir automatiquement les en-têtes pour plusieurs requêtes ou des requêtes ultérieures. Par exemple, vous devrez peut-être envoyer une propriété de configuration spécifique à partir de tous les clients d’API mobiles React Native via un en-tête personnalisé. L’ajout de cet en-tête personnalisé à tous les endroits où vous appelez des fonctions Axios peut ajouter des segments de code répétitifs à votre base de code.

Nous pouvons Pour résoudre ce problème, définissez des en-têtes globaux et mettez à jour la configuration par défaut. Ce code définit un en-tête d’autorisation global pour toutes les requêtes :

axios.defaults.headers.common['Authorization'] = 'Bearer ${localStorage.getItem('access_token')}' ;

Ce code définit les en-têtes d’autorisation pour toutes les requêtes :

axios.defaults.headers.post['Authorization'] = 'Bearer ${localStorage.getItem('access_token')}' ;

De même, il est également possible de définir des en-têtes globaux pour d’autres méthodes HTTP.

Définition d’en-têtes pour les instances Axios

Nous travaillons généralement avec des applications Web qui ont une URL d’API RESTful, mais certaines applications à grande échelle peuvent se connecter avec plusieurs URL RESTful. Si nous définissons des en-têtes dans la configuration globale par défaut d’Axios, tous les backends RESTful recevront ces en-têtes. Pour éviter cette situation, Axios propose un moyen de créer plusieurs instances Axios avec des configurations globales isolées. Nous pouvons également définir la demande pour les appels d’API en créant une instance spécifique d’Axios.

Pour configurer correctement les en-têtes pour chaque requête, nous pouvons créer une instance d’Axios à l’aide de cette instance, puis définir une configuration personnalisée sur cette instance, comme indiqué ici :

const instance = axios.create({ baseURL : 'http://localhost:3000', headers : { 'MyCustomHeader1' : '1', 'MyCustomHeader2' : '2' } }) ;

Nous pouvons réutiliser cette configuration chaque fois que nous envoyons une nouvelle requête à l’aide de cette instance Axios particulière.

Lorsque nous utilisons l’objet pour faire une requête, l’en-tête d’autorisation sera joint automatiquement :

instance.get('/users') .then((res) => console.log(res.data)) .catch((err) => console.error(err)) ;

Comme vous vous y attendez normalement, si vous créez une nouvelle instance Axios pour une autre API RESTful, elle n’héritera pas de ces en-têtes globaux de l’instance précédente, car il s’agit de deux instances distinctes.

Définition des en-têtes à l’aide d’Axios Nous

pouvons également utiliser les intercepteurs Axios (fonctions appelées par Axios) pour définir les en-têtes de demande pour les appels API. Les intercepteurs peuvent être utilisés pour modifier une demande avant qu’elle ne soit transmise ou pour modifier une réponse avant qu’elle ne soit remise aux rappels. Ils sont essentiellement équivalents aux middlewares d’Express ou de Mongoose.

J’ai déjà travaillé sur un projet qui nécessitait qu’un en-tête d’autorisation, contenant le jeton d’accès utilisateur, soit ajouté à chaque requête. Il s’agissait d’une application financière, et le système devait vérifier l’identité de l’utilisateur pour chaque demande. Il s’agit d’un exemple dans lequel il aurait été préférable d’attacher automatiquement l’en-tête d’autorisation à chaque demande, plutôt que de les définir individuellement.

L’authentification est l’une des applications les plus courantes des intercepteurs. Une application cliente vérifie souvent l’identité de l’utilisateur auprès du serveur en soumettant un jeton d’accès secret dans le en-tête d’autorisation.

Nous pouvons utiliser les intercepteurs Axios pour définir automatiquement l’en-tête de toutes les requêtes :

axios.interceptors.request.use( config => { config.headers['Authorization'] = 'Bearer ${localStorage.getItem('access_token')}' ; return config ; }, error => { return Promise.reject(error) ; } ) ;

Dans cet exemple, nous avons utilisé la méthode pour mettre à jour chaque en-tête de requête et définir le jeton d’accès dans l’en-tête HTTP.

Nous ciblons l’en-tête de l’objet et définissons un jeton, qui est stocké dans , comme sa valeur.

les exemples de code précédents, je vous ai montré plusieurs approches pour définir des en-têtes sans instructions conditionnelles - ces en-têtes contiennent des valeurs fixes et codées en dur et un jeton d’accès de .

Dans certains scénarios, nous devons modifier conditionnellement les en-têtes en fonction des variables d’environnement, des détails de la demande et d’autres valeurs de configuration ou d’exécution de l’application. Axios est flexible et vous permet de modifier les en-têtes globaux à tout moment :

axios.defaults.headers.common['MyGlobalHeader'] = '1' ; setTimeout(() => { axios.defaults.headers.common['MyGlobalHeader'] = '2' ; }, 5000) ;

Ainsi, nous pouvons modifier conditionnellement les en-têtes globaux en fonction de divers facteurs. Par exemple, le segment de code suivant ajoute conditionnellement des en-têtes de débogage internes basés sur une variable d’environnement :

function setHeaders(options = {}) { if(process.env.DEBUG_MODE) { axios.defaults.headers.common['Debug-Mode'] = '1' ; axios.defaults.headers.common['Debug-Extras'] = getDebugExtras() ; } }

De même, vous pouvez utiliser la propriété pour modifier conditionnellement les en-têtes d’une instance Axios.

Si vous devez définir des en-têtes conditionnels basés sur les demandes entrantes, vous pouvez utiliser un intercepteur de demandes comme suit :

axios.interceptors.request.use( config => { if(config.url.includes('/users')) { config.headers['MyCustomHeader1'] = 1 ; } return config ; } ) ;

L’exemple d’intercepteur ci-dessus définit un en-tête personnalisé uniquement pour les demandes de point de terminaison utilisateur en comparant l’URL de la demande. De même, vous pouvez définir des en-têtes conditionnels basés sur d’autres détails de la requête, tels que la méthode HTTP, la charge utile JSON, etc.

Les intercepteurs de réponse Axios sont utiles pour surveiller les jetons d’accès en vue d’un renouvellement imminent des jetons. Une fonction peut être utilisée pour mettre à jour un jeton avant qu’il n’expire :

const refreshToken = async () => { // récupère un nouveau jeton }

Nous pouvons également appeler la méthode pour obtenir un nouveau jeton d’accès chaque fois qu’une réponse renvoie une erreur, ce qui signifie que le jeton existant a expiré :

axios.interceptors.response.use( réponse => { return response ; }, async error => { if(error.response.status == 401) { let token = await refreshToken() ; axios.defaults.headers.common['Autorisation'] = 'Porteur ' + jeton ; } } );

Dans cet exemple, la méthode intercepte toutes les réponses entrantes, puis vérifie l’état de . Si la demande qui s’est déclenchée n’est pas authentifiée, le jeton a expiré. Dans ce cas, nous appelons conditionnellement la fonction pour obtenir un nouveau jeton d’accès et l’utiliser avec les nouvelles demandes sortantes en mettant à jour l’en-tête d’autorisation global. Ce flux est maintenant pré-développé dans la bibliothèque d’intercepteurs axios-auth-refresh.

Les

applications Web modernes nécessitent souvent une gestion dynamique des en-têtes basée sur les rôles des utilisateurs, les sessions ou l’état de l’application. Les intercepteurs Axios offrent un moyen puissant d’implémenter cette fonctionnalité.

Voici une approche complète de l’injection d’en-tête dynamique à l’aide d’un système de gestion d’en-tête :

const headerManager = { getUserRole : () => localStorage.getItem('userRole'), getSessionData : () => localStorage.getItem('sessionData'), getCustomHeaders : function() { const role = this.getUserRole() ; const session = this.getSessionData() ; const headers = {} ; const headers = {} ; if (role === 'admin') { headers['Admin-Access'] = 'true' ; headers['Admin-Level'] = '1' ; } if (session) { headers['Session-Data'] = session ; } return headers ; } } ; Implémenter l’injection d’en-tête dynamique à l’aide des intercepteurs axios.interceptors.request.use(config => { const dynamicHeaders = headerManager.getCustomHeaders() ; // Fusionner les en-têtes dynamiques avec la configuration existante config.headers = { ... config.headers, ... en-têtes dynamiques } ; configuration de retour ; });

Cette implémentation crée un système de gestion d’en-tête réutilisable qui centralise la logique d’en-tête. L’objet gère la responsabilité de déterminer quels en-têtes doivent être inclus en fonction de l’état actuel de l’application, tandis que l’intercepteur s’assure que ces en-têtes sont ajouté automatiquement à chaque demande.

Pour un contrôle plus granulaire, vous pouvez implémenter l’injection d’en-tête basée sur les rôles qui fait varier le contenu de l’en-tête en fonction des rôles d’utilisateur :

axios.interceptors.request.use(config => { const userRole = localStorage.getItem('userRole') ; const roleHeaders = { admin : { 'Admin-Access' : 'true', 'Admin-Level' : '1' }, manager : { 'Manager-Access' : 'true', 'Department' : localStorage.getItem('department') }, user : { 'User-Type' : 'standard' } } ; if (roleHeaders[userRole]) { config.headers = { .. .config.headers, ... roleHeaders[userRole] } ; } retour config ; });

Cette approche mappe des en-têtes spécifiques à différents rôles d’utilisateur, ce qui permet un contrôle précis des informations envoyées avec les demandes en fonction du niveau d’autorisation de l’utilisateur. L’intercepteur applique automatiquement les en-têtes appropriés en fonction du rôle de l’utilisateur actuel, ce qui est particulièrement utile dans les applications avec une autorisation complexe Exigences.

En implémentant l’injection d’en-tête dynamique, vous pouvez maintenir un code plus propre tout en vous assurant que toutes les demandes incluent les en-têtes nécessaires en fonction de l’état actuel de votre application et des exigences de sécurité.

Gestion des requêtes non sécurisées avec Axios

Lorsque vous travaillez avec des environnements de développement ou des scénarios de test, vous devrez peut-être gérer des connexions HTTPS non sécurisées ou des certificats auto-signés. Axios propose plusieurs options pour gérer ces situations en toute sécurité.

Pour gérer les certificats auto-signés ou ignorer la vérification SSL (non recommandée pour la production), vous pouvez créer une instance Axios avec un agent HTTPS personnalisé :

importer * en tant que https à partir de 'https' ; const instance = axios.create({ httpsAgent : nouveau https. Agent({ rejectUnauthorized : false }) }) ;

Dans cet exemple, nous créons une instance Axios qui accepte les certificats auto-signés en définissant la valeur . Cette configuration est Particulièrement utile pendant le développement lorsque vous utilisez des services hébergés localement qui utilisent des certificats auto-signés.

Pour les environnements Node.js, vous pouvez également fournir des certificats personnalisés pour une gestion plus sécurisée :

importer * en https à partir de 'https' ; const instance = axios.create({ httpsAgent : nouveau https. Agent({ ca : fs.readFileSync('/chemin/vers/certificat.pem'), }) }) ;

Cette configuration vous permet de spécifier votre propre certificat, ce qui constitue une approche plus sécurisée que la désactivation complète de la vérification SSL.

Une approche sûre pour la production consiste à utiliser des variables d’environnement pour gérer les configurations de sécurité :

importer * en https à partir de 'https' ; const instance = axios.create({ httpsAgent : nouveau https. Agent({ rejectNon autorisé : process.env.NODE_ENV === 'production' }) }) ;

Ce code garantit que la vérification SSL est toujours activée en production tout en permettant une flexibilité dans les environnements de développement.

Lors de la mise en œuvre de ces configurations de sécurité, gardez à l’esprit certaines considérations clés pour les environnements de production et de développement :

• Évitez de désactiver la vérification SSL en production : Bien qu’il puisse être tentant de contourner les problèmes de certificat, cela rend votre application vulnérable aux attaques de l’homme du milieu.
• Conservez des certificats SSL valides pour la production : Les certificats auto-signés conviennent au développement, mais les environnements de production nécessitent des certificats correctement signés par des autorités de confiance
• Mettez en place un flux de travail de gestion des certificats approprié : Cela garantit que votre équipe de développement peut travailler avec des certificats locaux tout en maintenant la sécurité
• . Tenez les paramètres de sécurité en fonction de l’environnement. : L’utilisation de variables d’environnement permet d’éviter que les configurations de développement ne fassent accidentellement leur chemin dans le code de production

Gestion des problèmes d’en-tête courants

Voici des solutions à certains problèmes courants liés aux en-têtes HTTP que vous pouvez rencontrer lors de l’utilisation d’Axios :

Fautes de frappe et cas de nom d’en-tête

Selon les RFC, chaque en-tête HTTP doit être significatif, lisible et insensible à la casse. Les développeurs peuvent essayer d’accéder directement aux en-têtes avec des clés mixtes en majuscules et en minuscules et peuvent écrire des noms d’en-tête incorrects.

Regardez les exemples suivants :

console.log(res.headers['Content-Length']) ; undefined console.log(res.headers['content_length']) ; undefined

Pour résoudre ce problème, assurez-vous d’accéder aux en-têtes avec des clés minuscules valides :

console.log(res.headers['content-length']) ; 100

En règle générale, les développeurs utilisent généralement des noms d’en-tête de titre, c’est-à-dire , , etc. Mais assurez-vous d’utiliser des noms en minuscules pour y accéder dans Axios.

CORS

(Cross-Origin Resource Sharing) est un mécanisme de sécurité basé sur un en-tête HTTP qui permet aux interfaces d’applications web d’utiliser les ressources de différents domaines en toute sécurité. Le navigateur n’autorise pas les applications à accéder aux ressources du backend si les en-têtes CORS requis ne sont pas présents dans les réponses HTTP du backend.

Cette erreur est également courante avec Axios. J’ai obtenu les erreurs suivantes lorsque j’ai essayé de me connecter à mon serveur de test Node.js local à partir d’une application CodeSandbox React :

Pour résoudre ce problème, si vous possédez le serveur ou si vous pouvez le configurer, vous pouvez ajouter des en-têtes CORS aux réponses du serveur. Par exemple, le programme d’installation Express.js suivant accepte n’importe quelle méthode HTTP de n’importe quel domaine :

import express à partir de 'express' ; importer cors à partir de 'cors' ; const app = express() ; port const = 3000 ; app.use(cors()) ;

Si vous n’avez aucun contrôle sur le serveur, vous pouvez implémenter un serveur proxy avec cors-n’importe où. Pour en savoir plus, consultez ce guide complet sur CORS.

S’il n’y a pas d’en-tête JSON

,

Axios définit automatiquement l’en-tête en fonction du format de charge utile. Par exemple, le type de contenu de la requête suivante devient :

const data = { customerId : 100, items : [] } ; axios.post('/factures', data) .then((res) => console.log(res.data)) .catch((err) => console.error(err)) ;

Si l’objet ci-dessus est ou

axios.post('/factures', {}) .then((res) => console.log(res.data)) .catch((err) => console.error(err)) ;

Vous pouvez également définir l’en-tête explicitement. Si vous êtes bloqué avec une erreur unique liée aux en-têtes en dehors de celles-ci, vous pouvez trouver des réponses en ouvrant un nouveau fil de discussion sur le référentiel GitHub Axios.

Conclusion

Dans cet article, nous avons vu comment définir des en-têtes de requête HTTP avec Axios en passant l’objet, en mettant à jour la valeur globale par défaut , la création d’une instance Axios spécifique et l’utilisation des intercepteurs Axios. Nous avons également discuté de la façon de définir conditionnellement les en-têtes et avons trouvé des solutions aux problèmes courants liés aux en-têtes HTTP auxquels de nombreux développeurs Web sont confrontés avec Axios. Enfin, nous avons abordé la gestion des connexions HTTPS non sécurisées et d’autres requêtes non sécurisées dans Axios.

Pour plus d’informations sur les fonctionnalités supplémentaires du client HTTP Axios, consultez la section « Comment effectuer des requêtes HTTP avec Axios ».