Analyse approfondie de la configuration globale d'Axios, des intercepteurs et du proxy inter-domaines (image et texte)

1. Configuration globale d'axios

1. Pourquoi configurer axios globalement

Dans le développement de projets réels, axios est utilisé dans presque tous les composants pour lancer des demandes de données. A ce moment, vous rencontrerez les deux problèmes suivants :

① Chaque composant doit importer des axios (code gonflé)

② Chaque fois que vous envoyez une requête, vous devez renseigner le chemin complet de la requête (pas propice à une maintenance ultérieure ) [Recommandations associées : Tutoriel vidéo vue.js】

2. Comment configurer axios globalement

Dans le fichier d'entrée main.js, montez axios globalement via app.config.globalProperties. L'exemple de code est le suivant :

3. Pour configurer axios globalement dans le projet vue2, vous devez configurer axios globalement via l'objet prototype du constructeur Vue dans le fichier d'entrée main.js 2. .intercepteur axios

1. Qu'est-ce qu'un intercepteur ? Les intercepteurs (anglais : Interceptors) sont automatiquement déclenchés à chaque fois qu'une requête ajax est effectuée et qu'une réponse est reçue.

2. Configurez l'intercepteur de requêtes

Vous pouvez configurer l'intercepteur de requête via axios.interceptors.request.use (rappel réussi, rappel échoué). L'exemple de code est le suivant:

2.1 Demande d'intercepteur - Authentification de jeton

2.2 Demande d'intercepteur - Afficher l'effet de chargement

avec l'aide du composant d'effet de chargement des éléments fournis par ui

3. Configurez l'intercepteur de réponse

Vous pouvez configurer l'intercepteur de réponse via axios.interceptors.response.use (rappel réussi, rappel échoué). L'exemple de code est le suivant :

Exemple pratique pour montrer l'effet de chargement :

3. Proxy proxy inter-domaines

1.

résoudre le problème inter-domaines

1), Cors (le traitement le plus standard) ne nécessite aucun traitement par le personnel frontal, seule la personne qui écrit le serveur doit ajouter quelques en-têtes de réponse spéciaux lors du renvoi de la réponse dans le serveur

2), Jsonp, la solution la plus ingénieuse Grâce à l'attribut src dans la balise script, cette fonctionnalité n'est pas restreinte par la politique de même origine lors de l'introduction de ressources externes. Elle est rarement utilisée en développement car elle. nécessite du personnel front-end et back-end pour le compléter ensemble, et cela ne peut résoudre que le problème inter-domaines des requêtes get Problème

3), serveur proxy

Le serveur proxy est également un serveur. cohérent avec le nôtre. La communication entre les deux serveurs ne respecte pas les mêmes restrictions de politique d'origine. Ainsi, lors de l'envoi d'une requête, le numéro de port est également 8080

L'adresse où se trouve le projet vue. s'exécute : http://localhost:8080/

L'adresse où l'interface API s'exécute : http://www.escook.cn/api/users

En raison de l'interface API actuelle, le partage de ressources inter-domaines CORS n'est pas activé , donc par défaut, l'interface ci-dessus ne peut pas demander avec succès !

2. Résoudre les problèmes d'interface inter-domaines via des proxys

Lorsque les projets créés via vue-cli rencontrent des problèmes d'interface inter-domaines, ils peuvent être résolus via des proxys :

① Mettez axios La racine de la requête path est défini sur l'adresse d'exécution du projet vue (les requêtes d'interface ne sont plus inter-domaines)

② Le projet vue constate que l'interface demandée n'existe pas et transmet la requête à l'agent proxy

③ Le proxy remplace le demandez le chemin racine avec la valeur de l'attribut devServer.proxy, lancez une véritable demande de données

④ Le proxy transmet les données demandées à axios

3 Configurez l'agent proxy dans le projet

Étape 1. Dans le fichier d'entrée main.js. , mettez le chemin racine de la requête d'axios. Remplacez-le par le chemin racine du projet Web en cours :

Étape 2, créez le fichier de configuration vue.config.js dans le répertoire racine du projet et déclarez le configuration suivante :

① La fonction proxy fournie par devServer.proxy n'est efficace que pendant la phase de développement et de débogage

② Lorsque le projet est mis en ligne, le serveur d'interface API a encore besoin. pour activer le partage de ressources entre domaines CORS.

Méthode d'utilisation 1 : Il existe deux serveurs proxy configurés. Imperfections :

1 Impossible de contrôler de manière flexible l'utilisation du serveur proxy

Le dossier public est équivalent au chemin racine de. le serveur 8080 (ce qui se trouve dans le serveur 8080 dépend de ce qui se trouve dans le dossier public). Parfois, la ressource demandée 8080 elle-même ne transmettra pas la demande au serveur 5000

2. être transmis au serveur 5000

Utilisez la deuxième méthode pour activer le préfixe de requête '/api' du serveur proxy

Fonction : Lorsqu'une requête locale est envoyée au serveur proxy, le serveur proxy déterminera si le Le préfixe de la requête est '/api'. Si c'est le cas, la requête sera envoyée (transférez la requête à 5000), sinon la requête ne sera pas envoyée. Vous pouvez contrôler de manière flexible si vous souhaitez utiliser le serveur proxy ('/. api' n'est pas une valeur fixe et peut être personnalisé comme '/hah', etc.)

La position de transport du préfixe : suivie de près par le numéro de port

Si vous demandez cela directement, cela provoquera une erreur 404 car lors de l'envoi de la requête au serveur 5050, il contient toujours /api/students. Le serveur 5050 a des étudiants mais n'a pas /api/students

Ajoutez cette configuration. peut garantir que lorsque le serveur proxy envoie une requête au serveur 5050, seul /students est envoyé pour obtenir les données

Rôle ws : utilisé pour prendre en charge websocket

changeOrigin : (utilisé pour contrôler le host dans la valeur de l'en-tête de la requête)

Lorsque changeOrigin: true, le serveur proxy indiquera qu'il s'agit également d'un serveur 5050

Lorsque changeOrigin: false, le serveur proxy indique qu'il s'agit d'un serveur 8080

Parfois, le serveur 5050 a certaines restrictions, il est donc préférable de définir cet élément de configuration sur true.

Si ws et changeOrigin ne sont pas écrits, la valeur par défaut est également vraie (si elle n'est pas écrite comme false dans React)

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!