Einstellung der authorization-header in der axios

Ich habe versucht, um eine GET-Anfrage an den National Park Service API mit axios und haben versucht, mehrere Möglichkeiten, meinen API-key im request-header, ohne Erfolg. Jede Hilfe wird sehr geschätzt werden.

Habe ich versucht:

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

und

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

und beide geben ein 401.
Es funktioniert, wenn ich senden Sie die GET-Anforderung, in der Briefträger, wo ich geben Sie die Autorisierung in das Feld Schlüssel ein, und mein API-Schlüssel in das Feld Wert ein.

Danke.

InformationsquelleAutor jcarapia | 2017-03-25

  1. 4

    Dieses Problem wird verursacht, durch die CORS-OPTIONS-Anfrage im browser, das hat nichts zu tun mit axios. https://developer.nps.gov erfordert Authorization - header in alle HTTP-Anforderung, einschließlich der OPTIONEN. Jedoch, alle benutzerdefinierten HTTP-Header ausgeschlossen werden OPTIONEN finden Sie auf https://www.w3.org/TR/cors/#cross-origin-request-with-preflight-0

    Den National Park Service-API sollte nicht verlangen Authorization header für die OPTIONS-Anforderung, aber es funktioniert. Sowieso, gibt es einen workaround: erstellen Sie eine vorwärts-route in Ihrem eigenen backend, akzeptieren Sie die HTTP-Anfrage vom browser, abrufen von Daten aus https://developer.nps.gov im backend, und schließlich zurück zum browser.

    Eigentlich, sende HTTP-request mit Dritten Autorisierungs-key vom browser ist definitiv keine gute Idee-Das design veröffentlicht wird National Park Service API-key an alle, die besuchen Sie die Seite, die ist sicherlich eine gefährliche Sache.

    Ihre erste Lösung (config API-Schlüssel zu axios Standard-Header) ist OK. Ich habe versucht, mit meinen eigenen API-key und URL, wird der response-code 200 OK.

    Für die zweite Lösung, die config Objekt verwendet werden sollte, da headers Feld im axios-Anweisung. Der code wäre:

    axios.get('https://developer.nps.gov/api/v0/parks?parkCode=yell', {headers: config})
    Danke für Eure Hilfe. Ich habe ein wenig mehr Forschung, und es scheint, dass der Grund für den Ausfall ist aufgrund der browser sendet eine OPTIONEN preflight-Anfrage ohne authorization-header. Dieses kommt wieder als 401 und damit die GET-Anforderung wird nicht ausgeführt. Allerdings habe ich nicht in der Lage gewesen, einen Weg zu finden, um dieses. Ich bekomme Folgendes in der Konsole: 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, das ist, weil alle benutzerdefinierten HTTP-Header ausgeschlossen werden CORS-OPTIONS-Anfrage. Ich werde aktualisieren, meine Antwort zu gehören die Problemumgehung.
    BTW, ich war mit axios in Node.js Umwelt, das ist, warum ich nicht erfüllen CORS-problem.
    Danke!!!! Es funktioniert! Ich wirklich schätzen Ihre Hilfe.

    InformationsquelleAutor shaochuancs

Schreibe einen Kommentar