So lösen Sie den Vue-Weiterleitungsstatuscode 200

Vue ist ein beliebtes Front-End-Entwicklungsframework. Aufgrund des Trends zur Trennung von Front-End und Back-End entscheiden sich immer mehr Entwickler für die Verwendung von Vue zum Erstellen von Front-End-Anwendungen. Die Weiterleitung des 200-Statuscodes ist ein häufiges Problem Vue-Entwicklung. Schauen wir uns dieses Problem im Folgenden genauer an.

Zunächst muss klar sein, dass der Server, wenn Vue eine Anfrage an das Backend sendet, einen HTTP-Statuscode zurückgibt, um Vue über das Ergebnis der Anfrageverarbeitung zu informieren. Der HTTP-Statuscode ist ein Statusindikator im HTTP-Protokoll, der dem Client mitteilt, ob das Ergebnis der Anfrage erfolgreich, fehlgeschlagen, umgeleitet usw. ist.

In Vue gehören zu den gängigen Anforderungsmethoden GET, POST, PUT, DELETE usw. Die Anforderungsstatuscodes dieser Methoden sind unterschiedlich: 200, 201, 204, 400, 401, 404, 500 usw. Darunter zeigt der Statuscode 200 an, dass der Server die Anfrage erfolgreich verarbeitet hat. Die Weiterleitung des Statuscodes 200 bedeutet, dass wir aus irgendeinem Grund den vom Backend zurückgegebenen Statuscode auf 200 erzwingen müssen.

Warum müssen wir den Statuscode 200 weiterleiten? Bei der tatsächlichen Projektentwicklung kann es zu Problemen mit domänenübergreifenden Anforderungen kommen. Bei domänenübergreifenden Anforderungen initiiert der Browser normalerweise eine OPTIONS-Preflight-Anfrage, um zu bestimmen, welche HTTP-Methoden, Header-Informationen usw. verwendet werden können.

Wenn das Backend die OPTIONS-Anfrage nicht verarbeitet und direkt einen Statuscode ungleich 200 zurückgibt, fängt der Browser ihn ab und lässt domänenübergreifende Anfragen nicht zu. In diesem Fall müssen wir den vom Backend zurückgegebenen Statuscode auf 200 ändern, um das Abfangen durch den Browser zu umgehen.

Wie leite ich den Statuscode 200 in Vue weiter? Vue bietet eine Methode zum Ändern des vom Backend zurückgegebenen Statuscodes über den Axios-Interceptor auf 200.

Konkret können wir in Axios einen Interceptor hinzufügen, um das Rückgabeergebnis zu verarbeiten, bevor die Daten zurückgegeben werden, und den vom Backend zurückgegebenen Statuscode auf 200 zu zwingen. Der Code lautet wie folgt:

import axios from 'axios';

axios.interceptors.response.use(response => {
  if (response.config.url !== '/login' && response.status !== 200) {
    response.status = 200;
  }
  return response;
}, error => {
  return Promise.reject(error);
});

In diesem Code fügen wir über die Methode axios.interceptors.response.use einen Interceptor hinzu, um die vom Backend zurückgegebenen Daten zu verarbeiten. Stellen Sie zunächst fest, ob es sich bei der aktuell angeforderten URL um eine Anmeldeanforderung handelt. Andernfalls wird der Statuscode zwangsweise auf 200 geändert und das verarbeitete Ergebnis zurückgegeben.

Abschließend ist zu beachten, dass die Weiterleitung des Statuscodes 200 nur eine Lösung darstellt. Wenn das Backend die OPTIONS-Anfrage verarbeiten und den Statuscode korrekt zurückgeben kann, besteht keine Notwendigkeit, den Statuscode weiterzuleiten.

Bei der Projektentwicklung müssen wir basierend auf der tatsächlichen Situation eine Lösung auswählen, die zu uns passt, um unnötigen Ärger zu vermeiden. Die Weiterleitung des 200-Statuscodes über den Vue-Interceptor kann das domänenübergreifende Problem des Browsers lösen, muss jedoch im Projekt mit Vorsicht verwendet werden, um nachteilige Folgen zu vermeiden.

Das obige ist der detaillierte Inhalt vonSo lösen Sie den Vue-Weiterleitungsstatuscode 200. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!