Solution à l'échec de la demande Vue de connexion à Laravel cross-domain

Avant-propos : Dans le développement réel, les requêtes inter-domaines sont un problème très courant, en particulier dans les projets de séparation front-end et back-end. Si vous utilisez Vue comme framework front-end et Laravel comme framework back-end, des problèmes inter-domaines peuvent survenir lors de la connexion. Cet article explique comment résoudre le problème de la demande de Vue de connexion à l'échec inter-domaines de Laravel.

1. Qu'est-ce que le cross-domain ?

En termes simples, le cross-domain fait référence aux demandes de données entre deux noms de domaine différents. Par exemple, dans un environnement de développement local, l'adresse de requête frontale est http://localhost:8080 et l'adresse back-end est http://localhost:8000. Si ces deux adresses sont différentes, des problèmes interdomaines sont possibles. peut survenir.

2. Pourquoi une défaillance entre domaines se produit-elle ?

L'échec entre domaines est généralement causé par la politique inter-domaines du navigateur. Par défaut, les navigateurs bloquent les demandes de données entre différents noms de domaine pour protéger la confidentialité et la sécurité des utilisateurs. La solution consiste à configurer le backend pour autoriser les requêtes inter-domaines.

3. Les paramètres du backend de Laravel autorisent les requêtes inter-domaines

Dans Laravel, les requêtes inter-domaines peuvent être implémentées via un middleware. Les étapes spécifiques sont les suivantes :

1. Recherchez le fichier Cors.php sous app/Http/Middleware. /, Ajoutez le code suivant dans la méthode handle :

header('Access-Control-Allow-Origin: *'); //Défini pour autoriser l'accès depuis toutes les sources
header('Access-Control-Allow-Headers: Origin , Content-Type, Authorization');//Définissez les informations d'en-tête pour autoriser l'accès
header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE');//Définissez la méthode pour autoriser l'accès
return $response;

2. Appliquez le middleware Cors à la route, recherchez le fichier app/Http/Kernel.php et ajoutez le code suivant :

protected $middlewareGroups = [
'web' => ],

'api' => [

  // ...

],];

À ce stade, le backend a autorisé les requêtes inter-domaines.

4. Configurer les requêtes inter-domaines sur le front-end Vue

L'étape suivante consiste à configurer les requêtes inter-domaines dans Vue. Nous pouvons utiliser le plugin Vue-axios pour envoyer des requêtes asynchrones et gérer les réponses. Exécutez la commande suivante dans le projet Vue pour installer Vue-axios :

npm install --save axios vue-axios

Ensuite, ajoutez la configuration Vue-axios suivante dans main.js :

import axios from 'axios'

importez VueAxios depuis 'vue-axios'

Vue.use(VueAxios, axios)
axios.defaults.withCredentials = true

5. Envoyez des requêtes asynchrones dans le projet vue

Avec les paramètres ci-dessus, nous avons autorisé les requêtes inter-domaines. . Dans le projet Vue, vous pouvez envoyer des requêtes asynchrones de la manière suivante :

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

'username' : username, // Paramètres passés sous le formulaire

'password' : mot de passe // Paramètres passés sous le formulaire
}).then(response => {

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

}).catch(error => {

   // 请求成功回调

})

Résumé : Pour mettre en place une requête cross-domain, il doit être dans le backend Définissez les en-têtes de requête qui autorisent les requêtes inter-domaines et configurez Vue-axios sur le front-end. Ce n'est qu'en adoptant ces deux méthodes que nous pourrons garantir que les projets avec séparation front-end et back-end pourront se dérouler sans problème.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!