Ich versuche, meinen Benutzer abzumelden, sobald er eine 401 erhalten hat. Ich verwende Axios, um Daten von der API zurückzugeben
Ich sah mich um und fand die gleiche Antwort von axios.interceptors.response
axios.interceptors.response.use(
response => response,
error => {
const {status} = error.response;
if (status === 401 ) {
store.dispatch('snackBar', snackbarObj)
}
return Promise.reject(error);
}
)
Es scheint, dass meine error.response undefiniert ist. Ich bin nicht sicher, was los ist? irgendwelche Ideen?
3 Antworten
Sie erhalten keine Antwort auf die Anfrage, die Sie mit Axios ausführen, da der Browser beim Ausführen der Preflight-Anfrage OPTION eine nicht autorisierte 401-Antwort erhalten hat, die zu einem Netzwerkfehler führt für die Anfrage, die Sie ausführen möchten.
Dies hängt damit zusammen, wie CORS funktioniert und wie Ihr Backend { {X0}} Anfragen. Um zu verstehen, wie der Backend-Server Preflight-Anfragen verarbeiten soll, ist es wichtig zu verstehen, , was die Motivation für die Einführung von Preflight-Anfragen ist.
Der Back-End-Server sollte bei OPTION -Anfragen nicht nach Authentifizierung suchen, sondern überprüfen, ob die Anforderung an einen Endpunkt gesendet wird, der domänenübergreifende Anforderungen akzeptiert, und in diesem Fall einen Erfolgscode zurückgeben.
Anschließend fährt der Browser automatisch mit der ursprünglich beabsichtigten Anforderung fort.
Auf diese Weise erhält der Axios Interceptor den 401-Fehlercode, wenn der Benutzer nicht mehr authentifiziert ist.
Schamlose Eigenwerbung, ich habe ein einfaches Axios-Plugin namens Axios-Middleware hilft dabei, die Verwendung von Axios-Abfangjägern in größeren Apps zu abstrahieren. Es bietet ein Beispiel für Middleware, die automatisch nicht authentifizierte Anforderungen verarbeitet, indem sie versucht, sich zu authentifizieren erneut, bevor Sie die Anforderung erneut senden.
Das Antwortobjekt ist auch dann nicht definiert, wenn die Preflight-Anforderung OPTION erfolgreich beendet wurde, die Antwort für das nächste GET/POST jedoch keinen Access-Control-Allow-Origin http-Header enthält.
In meinem Fall löst das Hinzufügen eines Access-Control-Allow-Origin - Headers für die Nginx 401-Antwort das Problem
Es ist keine bewährte Methode, aber ich löse es auf diese Weise
axios.interceptors.response.use(
response => response,
error => {
if (typeof error.response === "undefined") {
// do somthing
}
return Promise.reject(error);
}
)