Lösung für das Scheitern der Vue-Anfrage zur domänenübergreifenden Anmeldung bei Laravel

Vorwort: In der tatsächlichen Entwicklung sind domänenübergreifende Anforderungen ein sehr häufiges Problem, insbesondere bei Front-End- und Back-End-Trennungsprojekten. Wenn Sie Vue als Front-End-Framework und Laravel als Back-End-Framework verwenden, kann es beim Anmelden zu domänenübergreifenden Problemen kommen. In diesem Artikel erfahren Sie, wie Sie das Problem lösen können, dass die Vue-Anfrage zur domänenübergreifenden Anmeldung bei Laravel fehlschlägt.

1. Was ist domänenübergreifend?

Einfach ausgedrückt bezieht sich domänenübergreifend auf Datenanfragen zwischen zwei verschiedenen Domänennamen. In einer lokalen Entwicklungsumgebung lautet die Front-End-Anforderungsadresse beispielsweise http://localhost:8080 und die Back-End-Adresse http://localhost:8000. Wenn diese beiden Adressen unterschiedlich sind, treten domänenübergreifende Probleme auf kann auftreten.

2. Warum kommt es zu domänenübergreifenden Fehlern?

Ein domänenübergreifender Fehler wird normalerweise durch die domänenübergreifende Richtlinie des Browsers verursacht. Standardmäßig blockieren Browser Datenanfragen zwischen verschiedenen Domänennamen, um die Privatsphäre und Sicherheit der Benutzer zu schützen. Die Lösung besteht darin, das Backend so zu konfigurieren, dass es domänenübergreifende Anfragen zulässt.

3. Die Laravel-Backend-Einstellungen ermöglichen domänenübergreifende Anfragen. Die spezifischen Schritte lauten wie folgt:

1. Suchen Sie die Datei Cors.php unter app/Http/Middleware /, Fügen Sie den folgenden Code in der Handle-Methode hinzu:

header('Access-Control-Allow-Origin: *'); //Legen Sie fest, dass der Zugriff von allen Quellen erlaubt ist

header('Access-Control-Allow-Headers: Origin , Content-Type, Authorization');//Legen Sie die Header-Informationen fest, um den Zugriff zu erlauben

header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE');//Legen Sie die Methode fest, um den Zugriff zu erlauben
return $response;

2. Wenden Sie die Cors-Middleware auf die Route an, suchen Sie die Datei app/Http/Kernel.php und fügen Sie den folgenden Code hinzu:

protected $middlewareGroups = [

'web' => ],

'api' => [

  // ...

],

];

Zu diesem Zeitpunkt hat das Backend domänenübergreifende Anfragen zugelassen.

4. Einrichten domänenübergreifender Anfragen im Vue-Frontend

Der nächste Schritt besteht darin, domänenübergreifende Anfragen in Vue einzurichten. Wir können das Vue-axios-Plugin verwenden, um asynchrone Anfragen zu senden und Antworten zu verarbeiten. Führen Sie den folgenden Befehl im Vue-Projekt aus, um Vue-Axios zu installieren:

npm install --save axios vue-axios

Dann fügen Sie die folgende Vue-Axios-Konfiguration in main.js hinzu:

Axios aus „Axios“ importieren

VueAxios aus 'vue-axios' importieren

Vue.use(VueAxios, axios)

axios.defaults.withCredentials = true

5. Asynchrone Anfragen im Vue-Projekt senden

Mit den oben genannten Einstellungen haben wir domänenübergreifende Anfragen zugelassen . Im Vue-Projekt können Sie asynchrone Anfragen auf folgende Weise senden:

this.$axios.post('/login', {

'username': username, // In der Form übergebene Parameter

'password': Passwort // In der Form übergebene Parameter

}).then(response => {

 'throttle:60,1',
 \Illuminate\Routing\Middleware\SubstituteBindings::class,
 \App\Http\Middleware\Cors::class //添加此处

}).catch(error => {

   // 请求成功回调

})

Zusammenfassung: Um eine domänenübergreifende Anfrage einzurichten, ist es muss sich im Backend befinden. Legen Sie die Anforderungsheader fest, die domänenübergreifende Anforderungen ermöglichen, und konfigurieren Sie Vue-axios im Frontend. Nur durch die Anwendung dieser beiden Methoden können wir sicherstellen, dass Projekte mit Front-End- und Back-End-Trennung reibungslos ablaufen können.

Das obige ist der detaillierte Inhalt vonLösung für das Scheitern der Vue-Anfrage zur domänenübergreifenden Anmeldung bei Laravel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!