web-dev-qa-db-fra.com

Comment envoyer un en-tête d'autorisation avec axios

Comment puis-je envoyer un en-tête d'authentification avec un jeton via axios.js? J'ai essayé plusieurs choses sans succès, par exemple:

const header = `Authorization: Bearer ${token}`;
return axios.get(URLConstants.USER_URL, { headers: { header } });

Me donne cette erreur:

XMLHttpRequest cannot load http://localhost:8000/accounts/user/. Request header field header is not allowed by Access-Control-Allow-Headers in preflight response.

J'ai réussi à le faire fonctionner en définissant la valeur par défaut globale, mais je suppose que ce n'est pas la meilleure idée pour une seule demande:

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

Mise à jour:

La réponse de Cole m'a aidé à trouver le problème. J'utilise middleware Django-cors-headers qui gère déjà l'en-tête d'autorisation par défaut.

Mais j'ai pu comprendre le message d'erreur et corriger une erreur dans le code de ma requête axios, qui devrait ressembler à ceci

return axios.get(URLConstants.USER_URL, { headers: { Authorization: `Bearer ${data.token}` } });
javascriptaxios
65
foobar

Sur des requêtes http non simples, votre navigateur enverra d’abord une requête de "contrôle en amont" (une requête de méthode OPTIONS) afin de déterminer ce que le site en question considère que les informations sécurisées doivent être envoyées (voir ici pour le lien croisé). Spécification de la politique d'origine à ce sujet). L'un des en-têtes pertinents que l'hôte peut définir dans une réponse de contrôle en amont est Access-Control-Allow-Headers. Si l'un des en-têtes que vous souhaitez envoyer ne figurait pas dans la liste des en-têtes de liste blanche de la spécification ni dans la réponse de contrôle en amont du serveur, le navigateur refusera alors d'envoyer votre demande.

Dans votre cas, vous essayez d'envoyer un en-tête Authorization, qui n'est pas considéré comme l'un des en-têtes universellement sûrs. Le navigateur envoie ensuite une demande de contrôle en amont pour demander au serveur s’il doit envoyer cet en-tête. Le serveur envoie soit un en-tête Access-Control-Allow-Headers vide (ce qui signifie "n'autorise aucun en-tête supplémentaire"), soit un en-tête qui n'inclut pas Authorization dans sa liste d'en-têtes autorisés. . De ce fait, le navigateur ne va pas envoyer votre demande mais choisit plutôt de vous avertir en lançant une erreur.

Toute solution de contournement Javascript que vous trouverez et qui vous permet d’envoyer cette demande doit néanmoins être considérée comme un bogue, car elle est contraire à la stratégie de demande d’origine croisée que votre navigateur essaie d’appliquer pour votre propre sécurité.

tl; dr - Si vous souhaitez envoyer des en-têtes Authorization, votre serveur mieux vaut être configuré pour le permettre. Configurez votre serveur pour qu'il réponde à une demande OPTIONS à cette adresse URL avec un en-tête Access-Control-Allow-Headers: Authorization.

63
Cole Erickson

Essaye ça :

axios.get(
    url,
    {headers: {
        "name" : "value"
      }
    }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );
26
Matija Župančić

Cela a fonctionné pour moi:

let webApiUrl = 'example.com/getStuff';
let tokenStr = 'xxyyzz';
axios.get(webApiUrl, { headers: {"Authorization" : `Bearer ${tokenStr}`} });
18
sean717

Plutôt que de l'ajouter à chaque requête, vous pouvez simplement l'ajouter comme configuration par défaut, comme ça.

axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`
13
Canaan Etai

Vous avez presque raison, ajustez simplement votre code de cette façon

const header = Authorization: `Bearer-${token}`;
return axios.get(URLConstants.USER_URL, { headers: { header } });

remarquez où je place les backticks, j’ai ajouté '-' après Bearer, vous pouvez l’omettre si vous êtes certain de le gérer côté serveur

4
Jalasem

Au lieu d'appeler la fonction axios.get, utilisez:

axios({ method: 'get', url: 'your URL', headers: { Authorization: `Bearer ${token}` } })
3
Deepak
res.setHeader('Access-Control-Allow-Headers',
            'Access-Control-Allow-Headers, Origin,OPTIONS,Accept,Authorization, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers');

Blockquote: vous devez ajouter OPTIONS & Authorization à setHeader ()

ce changement a corrigé mon problème, essayez!

0
MESDOUR