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

Question

Comment puis-je envoyer un en-tête d'authentification avec un jeton via axios.js? J'ai essayé quelques petites 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 configuration par défaut, mais je devine que ce n'est pas la meilleure idée pour une seule requête:

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

Mise à jour :

Cole réponse m'a aidé à trouver le problème. Je suis à l'aide de django-scro-en-têtes de middleware qui déjà poignées en-tête d'autorisation par défaut.

Mais j'ai été capable de comprendre le message d'erreur et la correction d'une erreur dans mon axios code de la demande, qui devrait ressembler à ceci

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

Answer 1

Sur non de simples requêtes http de votre navigateur envoie à un "contrôle en amont" demande (une méthode d'OPTIONS de demande) d'abord, afin de déterminer ce que le site en question considère sécurité de l'information à envoyer (voir ici pour la croix-origine de la politique de spec à ce sujet). Un de la les en-têtes que l'hôte peut définir dans un contrôle en amont de la réponse est - Access-Control-Allow-Headers. Si l'un des en-têtes que vous souhaitez envoyer n'étaient pas répertoriés dans la spec de liste de liste blanche des en-têtes ou du serveur de contrôle en amont de réponse, le navigateur refuse d'envoyer votre demande.

Dans votre cas, vous êtes en train d'envoyer un Authorization - tête, ce qui n'est pas considéré comme l'un des universellement sûr d'envoyer des en-têtes. Le navigateur envoie ensuite une demande de contrôle en amont de demander au serveur de savoir s'il doit envoyer l'en-tête. Le serveur est soit en envoyant un vide Access-Control-Allow-Headers - tête (qui signifie "ne pas autoriser tout des en-têtes supplémentaires"), ou c'est l'envoi d'un en-tête qui ne comprennent pas les Authorization dans sa liste des admis en-têtes. De ce fait, le navigateur ne va pas à envoyer votre demande et choisit plutôt de vous en informer en jetant un message d'erreur.

Tout Javascript solution de contournement, vous trouvez qui vous permet d'envoyer cette demande devrait de toute façon être considéré comme un bug que c'est contre l'origine de la croix de la stratégie de demande de votre navigateur tente de faire respecter pour votre propre sécurité.

tl;dr - Si vous souhaitez envoyer des Authorization - têtes, votre serveur avait mieux être configuré pour autoriser. Configurer votre serveur de façon à ce qu'il répond à un OPTIONS demande à l'url avec un Access-Control-Allow-Headers: Authorization - tête.

Answer 2

Cela a fonctionné pour moi:

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

Answer 3

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}` 
 

Answer 4

Essaye ça :

 axios.get(
    url,
    {headers: {
        "name" : "value"
      }
    }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );
 

Answer 5

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 sûr de gérer côté serveur