Réglage de l'en-tête d'autorisation dans axios

J'ai essayé de faire une demande pour le Service de Parc National de l'API avec axios et ont essayé plusieurs façons de configurer ma clé API dans l'en-tête de 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 de retour 401.
Il fonctionne lorsque j'envoie la requête GET en Facteur, où je entrer Autorisation dans le champ de la clé, et ma clé API dans le champ de valeur.

Merci.

OriginalL'auteur jcarapia | 2017-03-25

  1. 4

    Ce problème est provoqué par la SCRO OPTIONS de demande dans le navigateur, ce qui n'a rien à voir avec de l'axios. https://developer.nps.gov nécessite Authorization d'en-tête dans tous les requête 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-0

    Le National Park Service API ne doit pas exiger Authorization - tête pour les OPTIONS de demande de, mais il le fait. De toute façon, il y a une solution: faire une route dans votre propre arrière-plan, accepter la requête HTTP du navigateur, de récupérer des données à partir https://developer.nps.gov dans le backend, et enfin retourner au navigateur.

    En fait, envoyer la requête HTTP avec l'autorisation d'un tiers de la clé à partir du navigateur est certainement pas une bonne idée, Cette conception permet d'exposer votre Service des parcs Nationaux clé API pour tout le monde qui visite la page, qui est certainement une chose dangereuse.

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

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

    axios.get('https://developer.nps.gov/api/v0/parks?parkCode=yell', {headers: config})
    Je vous remercie pour votre aide. J'ai fait des recherches un peu plus et il semble que la raison de l'échec est dû au navigateur de l'envoi d'une demande de contrôle en amont, sans l'autorisation de l'en-tête. Cela revient à 401 et donc la demande n'est pas effectuée. Cependant, je n'ai pas été en mesure de trouver un moyen de contourner cela. Je reçois le texte suivant dans la console: OPTIONS https://developer.nps.gov/api/v0/parks?parkCode=yell 401 (OK)
    localhost/:1 XMLHttpRequest cannot load https://developer.nps.gov/api/v0/parks?parkCode=yell. Response for preflight has invalid HTTP status code 401
    ah, c'est parce que tous les en-têtes HTTP personnalisés seront exclus de la SCRO demande OPTIONS. Je vais mettre à jour ma réponse à inclure la solution de contournement.
    BTW, j'ai été en utilisant axios dans Node.js l'environnement, c'est pourquoi je n'ai pas rencontré le problème de la SCRO.
    Merci!!!!! Il fonctionne! J'apprécie vraiment votre aide.

    OriginalL'auteur shaochuancs