Axios interceptor token-Header ist in config, aber nicht in Request-Headern vorhanden

9

Ich habe einen Axios-Interceptor erstellt, der für das Hinzufügen eines Tokens zuständig ist, bevor jede Anfrage an meine Rest-API gesendet wird.

%Vor%

Wie Sie in Zeile 2 sehen können, importiere ich Vuex-Speicher und hier ist mein Token abgelegt. In Zeile 8 füge ich dieses Token tatsächlich zu config -Objekt hinzu und dann tröste ich es in der nächsten Zeile.

Es wird in meiner main.js-Datei wie folgt ausgeführt:

%Vor%

Das Token ist im Konfigurationsobjekt vorhanden, das ich in meiner Konsole sehe (weil ich config Objekt getröstet habe):

Es wird jedes Mal ausgeführt, wenn ich eine Anfrage zum Zurücksetzen der API wie erwartet mache. Wenn ein Token vorhanden ist (nach der Anmeldung), sollte jeder Anfrage eine Token-Kopfzeile hinzugefügt werden. Leider fügt es es nicht hinzu, obwohl es auf dem Config-Objekt vorhanden ist, was mich etwas verwirrt.

Es fügt tatsächlich kein Token zur echten Anfrage hinzu, wie ich in der Netzwerk-Registerkarte sehen kann:

Dieser Screenshot wurde natürlich nach dem Login erstellt, also befindet sich das Token bereits im Vuex Speicher und es hat config out (Teil des Interceptors) nachdem ich die Logout Funktion ausgeführt habe (welche Call Rest API).

Im Ergebnis habe ich als Reaktion auf meine Rest API 400 (Bad request) Status, weil ich kein Token gesendet habe.

BEARBEITEN !!!

Ich habe überlegt, was ich dieser Frage hinzufügen kann, um es besser zu machen. Ich denke, dass es unmöglich ist, einen Demo-Plocker zu erstellen, also habe ich beschlossen, eine kleine Repository -Demo zu erstellen, die du herunterladen und sehen kannst . Ich hoffe, es wird helfen, das Problem zu lösen!

    
BT101 27.12.2017, 13:38
quelle

1 Antwort

3

Ich finde es heraus.

Ich wusste nicht, dass es eine sogenannte Preflight-Anfrage gibt, die vor einer echten API-Anfrage ausgeführt wird. Wenn die Preflight-Anforderung fehlschlägt, werden keine Header mehr akzeptiert / empfangen. Dies ist, warum ich es nicht auf echte Anfrage in Chrome Console Netzwerk-Registerkarte sah, aber es war in Config-Objekt, das war console.log ed in Abfangjäger.

Gleiches in der Repository-Demo, die eine nicht existierende URL aufgerufen hat, daher ist die Preflight-Anfrage dort ebenfalls fehlgeschlagen. Beim Erstellen dieser Demo hatte ich keine Ahnung, dass so etwas wie eine Preflight-Anfrage existiert, also war ich mir sicher, dass es egal ist, ob ich einen bestehenden URL-Endpunkt oder einen fiktiven URL-Endpunkt anrufe Kopfzeile dort anfordern.

    
BT101 01.01.2018, 00:28
quelle