web-dev-qa-db-fra.com

Définition de l'en-tête d'autorisation dans axios

J'ai essayé de faire une demande GET à l'API National Park Service avec axios et j'ai essayé plusieurs façons de définir ma clé API dans l'en-tête de la demande en vain. Toute aide sera grandement appréciée.

J'ai essayé:

axios.defaults.headers.common['Authorization'] = "MY-API-KEY";
axios.get('https://developer.nps.gov/api/v0/parks?parkCode=yell')
.then((resp) => {
    console.dir(resp);
});

et

let config = {'Authorization': 'MY-API-KEY'};
axios.get('https://developer.nps.gov/api/v0/parks?parkCode=yell', config)
.then((resp) => {
    console.dir(resp);
});

et les deux renvoient un 401. Cela fonctionne lorsque j'envoie la demande GET dans Postman, où j'entre Autorisation dans le champ clé et ma clé API dans le champ valeur.

Je vous remercie.

httpreactjsgethttp-status-code-401axios
5
jcarapia

Ce problème est dû à la requête CORS OPTIONS dans le navigateur, qui n'a rien à voir avec axios. https://developer.nps.gov nécessite l'en-tête Authorization dans toutes les requêtes HTTP, y compris les OPTIONS. Cependant, tous les en-têtes HTTP personnalisés seront exclus des OPTIONS, reportez-vous à https://www.w3.org/TR/cors/#cross-Origin-request-with-preflight-

L'API National Park Service ne doit pas exiger l'en-tête Authorization pour la demande OPTIONS, mais c'est le cas. Quoi qu'il en soit, il existe une solution de contournement: effectuez un routage direct dans votre propre backend, acceptez la demande HTTP du navigateur, récupérez les données de https://developer.nps.gov dans le backend, et enfin renvoyez-la au navigateur.

En fait, envoyer une demande HTTP avec une clé d'autorisation tierce à partir du navigateur n'est certainement pas une bonne idée - Cette conception exposera votre clé API National Park Service à tous ceux qui visitent la page, ce qui est certainement dangereux.

Votre première solution (configuration de la clé API aux en-têtes par défaut axios) est OK. J'ai essayé avec ma propre clé API et votre URL, le code de réponse est 200 OK.

Pour la deuxième solution, l'objet config doit être utilisé comme champ headers dans l'instruction axios. Le code serait:

axios.get('https://developer.nps.gov/api/v0/parks?parkCode=yell', {headers: config})
4
shaochuancs