


Explication détaillée de la requête vue-cli+axios et des étapes de mise en œuvre inter-domaines
Cette fois, je vais vous apporter une explication détaillée des étapes de la requête vue-cli+axios et de la mise en œuvre inter-domaines. Quelles sont les précautions pour la requête vue-cli+axios et la mise en œuvre inter-domaines. . Ce qui suit est un cas pratique. Levez-vous et jetez un œil.
Installer axios
cnpm install axios --save
Introduisez axios dans le fichier où vous souhaitez utiliser axios
main.js文件 :import axios from 'axois' 要发送请求的文件:import axios from 'axois'
Définissez le proxy dans le fichier config/index.js
dev: { proxyTable: {// 输入/api 让其去访问http://localhost:3000/api '/api':{ target:'http://localhost:3000'//设置调用的接口域名和端口号 ( 设置代理目标) }, '/api/*':{ target:'http://localhost:3000' }, changeOrigin: true, pathRewrite: { //路径重写 '^/api': '/' //这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://localhost:3002/user/add',直接写‘/api/goods/add'即可 } }
Essayez-le, le cross-domain est réussi, mais ce développement des connaissances Le problème inter-domaines est résolu dans l'environnement de développement, s'il est effectivement déployé sur le serveur, il y aura toujours des problèmes inter-domaines s'il ne provient pas de la même origine.
Méthode de requête axios
Obtenir la requête
// 向具有指定id的用户发出请求 axios.get('/user?id=1001') .then(function (response) { console.log(response.data); }).catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { id: 1001 } }).then(function (response) {//请求成功回调函数 console.log(response); }).catch(function (error) {//请求失败时的回调函数 console.log(error); });
axios.post('/user', { userId: '10001' //注意post请求发送参数的方式和get请求方式是有区别的 }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });
Supplément :
axios résout les problèmes inter-domaines et les intercepteurs en vue Utilisez
1. axios dans vue ne prend pas en charge la déclaration de la méthode vue.use(). Il y a donc deux façons de résoudre ce problème :
La première : introduire axios dans main.js, puis le définir comme propriété sur la chaîne de prototypes vue, afin que this.axios soit directement accessible dans le composant Utilisation de
import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }) .then(function(res){ console.log(res); }) .catch(function(err){ console.log(err); }) }
Une chose à noter ici est qu'il n'est pas valide de copier les données demandées dans data en utilisant ceci dans axios. Cela peut être résolu en utilisant les fonctions fléchées.
1. Le problème inter-domaines du proxy local lorsque le front-end de l'échafaudage vue cli ajuste l'interface de données back-end, par exemple, j'accède à l'interface sur localhost http://10.1.5.11:8080/ xxx/duty?time=2017- 07-07 14:57:22', il doit être accessible sur tous les domaines. En cas d'accès direct, XMLHTTPRequest ne peut pas être chargé et sera signalé http://10.1.5.11:8080/xxx/duty? time=2017-07-07 14:57:22'. La réponse à la demande de contrôle en amont ne passe pas le contrôle d'accès….
Pourquoi y a-t-il un problème inter-domaines ? Comme il s'agit d'une communication non originale, vous pouvez aller sur Google pour en savoir plus. Ici, il vous suffit de configurer proxyTable dans webpack. Recherchez index.js dans la configuration comme suit :
config/index.js dev: { proxyTable: { '/api': { target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号 changeOrigin: true, //跨域 pathRewrite: { '^/api': '/' //这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22',直接写‘/api/xxx/duty?time=2017-07-07 14:57:22'即可 } }
Cross. -succès de domaine, mais ce n'est qu'un problème inter-domaines résolu dans l'environnement de développement (dev). S'il est réellement déployé sur le serveur dans l'environnement de production, il y aura toujours des problèmes inter-domaines s'il ne provient pas du même. source. Par exemple, le port du serveur que nous avons déployé est 3001, ce qui nécessite un débogage conjoint du front-end et du back-end. La première étape Nous pouvons tester le front-end dans deux environnements : production et développement dans config/dev.env.js et. prod.env.js, c'est-à-dire que dans l'environnement de développement/production, configurez respectivement l'adresse API_HOST demandée. Dans l'environnement de développement, nous utilisons l'adresse proxy api configurée ci-dessus qui utilise l'adresse d'interface normale dans l'environnement de production, donc configurez-la comme. this. Effectuez les configurations suivantes dans les fichiers config/dev.env.js
et prod.env.js
respectivement.
config/dev.env.js: module.exports = merge(prodEnv, { NODE_ENV: '"development"',//开发环境 API_HOST:"/api/" }) prod.env.js module.exports = { NODE_ENV: '"production"',//生产环境 API_HOST:'"http://10.1.5.11:8080/"' }
Bien sûr, vous pouvez demander directement http://10.1.5.11:8080// dans les environnements de développement et de production. Après la configuration, le programme déterminera automatiquement si l'environnement actuel est en développement ou en production pendant les tests, puis fera automatiquement correspondre API_HOST. Nous pouvons utiliser process.env.API_HOST dans n'importe quel composant pour utiliser l'adresse, telle que :
. instance.post(process .env.API_HOST+'user/login', this.form)
Ensuite, dans la deuxième étape, le serveur backend configure cros cross-domain, qui est access-control-allow-origin : *Tous les moyens d'accès. Pour résumer : dans un environnement de développement, notre front-end peut configurer un proxy pour inter-domaines. Dans un environnement de production réel, nous avons besoin de la coopération du back-end. Un certain expert a déclaré : Cette méthode n'est pas facile à utiliser dans ie9 et versions antérieures. Si la compatibilité est requise, le meilleur moyen est d'ajouter un proxy au port du serveur sur le backend. L'effet est similaire au proxy webpack pendant le développement.
1. Axios envoie un problème de demande de publication
Lors de l'envoi d'une demande de publication, Content-Type est généralement défini, le type de contenu à envoyer, application/json fait référence à l'envoi d'un objet json Mais vous devez le chaîner à l'avance. application/xxxx-form fait référence à l'envoi ? Pour le format a=b&c=d, vous pouvez utiliser la méthode qs pour le formater. qs sera installé automatiquement après l'installation d'axios. Il vous suffit de l'importer dans le composant.
const postData=JSON.stringify(this.formCustomer); 'Content-Type':'application/json'} const postData=Qs.stringify(this.formCustomer);//过滤成?&=格式 'Content-Type':'application/xxxx-form'}
1. Utilisation d'intercepteurs
Lorsque nous visitons une page d'adresse, il nous est parfois demandé de nous reconnecter avant d'accéder à la page, c'est-à-dire l'authentification d'identité échoue, par exemple si le jeton est perdu ou si le jeton existe toujours localement, mais il a expiré, donc le simple fait de déterminer s'il existe une valeur de jeton local ne peut pas résoudre le problème. À ce stade, le serveur renvoie une erreur 401 lors de la demande, indiquant une erreur d'autorisation, c'est-à-dire qu'il n'y a aucun droit d'accéder à la page.
我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤。
// http request 请求拦截器,有token值则配置上token值 axios.interceptors.request.use( config => { if (token) { // 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了 config.headers.Authorization = token; } return config; }, err => { return Promise.reject(err); }); // http response 服务器响应拦截器,这里拦截401错误,并重新跳入登页重新获取token axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 401: // 这里写清除token的代码 router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath} //登录成功后跳入浏览的当前页面 }) } } return Promise.reject(error.response.data) });
下面看下
vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一到门槛,会报错XMLHTTPRequest can not load http://40.00.100.100:3002/. Response to preflight request doesn't
pass access control…. 为什么跨域同源非同源自己去查吧,在webpack配置一下proxyTable就OK了,如下 config/index.js
dev: { 加入以下 proxyTable: { '/api': { target: 'http://40.00.100.100:3002/',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, pathRewrite: { '^/api': '/' //这里理解成用‘/api'代替target里面的地址, 后面组件中我们掉接口时直接用api代替 比如我要调 用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add'即可 } } }
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

La carte par défaut sur l'iPhone est Maps, le fournisseur de géolocalisation propriétaire d'Apple. Même si la carte s’améliore, elle ne fonctionne pas bien en dehors des États-Unis. Il n'a rien à offrir par rapport à Google Maps. Dans cet article, nous discutons des étapes réalisables pour utiliser Google Maps afin de devenir la carte par défaut sur votre iPhone. Comment faire de Google Maps la carte par défaut sur iPhone Définir Google Maps comme application cartographique par défaut sur votre téléphone est plus facile que vous ne le pensez. Suivez les étapes ci-dessous – Étapes préalables – Vous devez avoir Gmail installé sur votre téléphone. Étape 1 – Ouvrez l'AppStore. Étape 2 – Recherchez « Gmail ». Étape 3 – Cliquez à côté de l'application Gmail

Lors de la connexion à iTunesStore à l'aide de l'AppleID, cette erreur indiquant "Cet AppleID n'a pas été utilisé dans iTunesStore" peut s'afficher à l'écran. Il n'y a pas de messages d'erreur à craindre, vous pouvez les corriger en suivant ces ensembles de solutions. Correctif 1 – Modifier l'adresse de livraison La principale raison pour laquelle cette invite apparaît dans l'iTunes Store est que vous n'avez pas la bonne adresse dans votre profil AppleID. Étape 1 – Tout d’abord, ouvrez les paramètres iPhone sur votre iPhone. Étape 2 – AppleID doit être au-dessus de tous les autres paramètres. Alors, ouvrez-le. Étape 3 – Une fois sur place, ouvrez l’option « Paiement et expédition ». Étape 4 – Vérifiez votre accès à l'aide de Face ID. étape

WeChat est l'une des plateformes de médias sociaux en Chine qui lance continuellement de nouvelles versions pour offrir une meilleure expérience utilisateur. La mise à niveau de WeChat vers la dernière version est très importante pour rester en contact avec sa famille et ses collègues, rester en contact avec ses amis et se tenir au courant des derniers développements. 1. Comprendre les fonctionnalités et améliorations de la dernière version Il est très important de comprendre les fonctionnalités et améliorations de la dernière version avant de mettre à niveau WeChat. Pour améliorer les performances et corriger des bugs, vous pouvez en savoir plus sur les différentes nouvelles fonctionnalités apportées par la nouvelle version en consultant les notes de mise à jour sur le site officiel ou sur l'App Store de WeChat. 2. Vérifiez la version actuelle de WeChat Nous devons vérifier la version de WeChat actuellement installée sur le téléphone mobile avant de mettre à niveau WeChat. Cliquez pour ouvrir l'application WeChat « Moi », puis sélectionnez le menu « À propos » où vous pouvez voir le numéro de version actuel de WeChat. 3. Ouvrez l'application

Windows 11, en tant que dernier système d'exploitation lancé par Microsoft, est profondément apprécié des utilisateurs. Lors de l'utilisation de Windows 11, nous devons parfois obtenir les droits d'administrateur système afin d'effectuer certaines opérations nécessitant des autorisations. Ensuite, nous présenterons en détail les étapes pour obtenir les droits d'administrateur système dans Windows 11. La première étape consiste à cliquer sur "Menu Démarrer". Vous pouvez voir l'icône Windows dans le coin inférieur gauche. Cliquez sur l'icône pour ouvrir le "Menu Démarrer". Dans la deuxième étape, recherchez et cliquez sur "

Si vous n'avez pas de contrôle sur le niveau de zoom dans Safari, faire avancer les choses peut être délicat. Donc, si Safari semble zoomé, cela pourrait être un problème pour vous. Voici quelques façons de résoudre ce problème mineur de zoom dans Safari. 1. Grossissement du curseur : sélectionnez « Affichage » > « Grossissement du curseur » dans la barre de menu Safari. Cela rendra le curseur plus visible sur l'écran, ce qui facilitera son contrôle. 2. Déplacez la souris : Cela peut paraître simple, mais parfois, le simple fait de déplacer la souris vers un autre emplacement de l'écran peut automatiquement la ramener à sa taille normale. 3. Utilisez les raccourcis clavier Fix 1 – Réinitialiser le niveau de zoom Vous pouvez contrôler le niveau de zoom directement depuis le navigateur Safari. Étape 1 – Lorsque vous êtes dans Safari

Vous rencontrez des problèmes avec l’application Shazam sur iPhone ? Shazam vous aide à trouver des chansons en les écoutant. Cependant, si Shazam ne fonctionne pas correctement ou ne reconnaît pas la chanson, vous devrez la dépanner manuellement. La réparation de l'application Shazam ne prendra pas longtemps. Alors, sans perdre plus de temps, suivez les étapes ci-dessous pour résoudre les problèmes avec l'application Shazam. Correctif 1 – Désactiver la fonctionnalité de texte en gras Le texte en gras sur iPhone peut être la raison pour laquelle Shazam ne fonctionne pas correctement. Étape 1 – Vous ne pouvez le faire qu’à partir des paramètres de votre iPhone. Alors, ouvrez-le. Étape 2 – Ensuite, ouvrez les paramètres « Affichage et luminosité ». Étape 3 – Si vous constatez que « Texte en gras » est activé

La fonction de capture d'écran ne fonctionne pas sur votre iPhone ? Prendre une capture d'écran est très simple car il vous suffit de maintenir enfoncés simultanément le bouton d'augmentation du volume et le bouton d'alimentation pour saisir l'écran de votre téléphone. Cependant, il existe d'autres moyens de capturer des images sur l'appareil. Correctif 1 – Utilisation d’Assistive Touch Prenez une capture d’écran à l’aide de la fonction Assistive Touch. Étape 1 – Accédez aux paramètres de votre téléphone. Étape 2 – Ensuite, appuyez pour ouvrir les paramètres d'accessibilité. Étape 3 – Ouvrez les paramètres Touch. Étape 4 – Ensuite, ouvrez les paramètres Assistive Touch. Étape 5 – Activez Assistive Touch sur votre téléphone. Étape 6 – Ouvrez « Personnaliser le menu supérieur » pour y accéder. Étape 7 – Il ne vous reste plus qu'à lier l'une de ces fonctions à votre capture d'écran. Alors cliquez sur le premier

L'application horloge est-elle absente de votre téléphone ? La date et l'heure apparaîtront toujours sur la barre d'état de votre iPhone. Cependant, sans l'application Horloge, vous ne pourrez pas utiliser l'horloge mondiale, le chronomètre, le réveil et bien d'autres fonctionnalités. Par conséquent, réparer l’application d’horloge manquante devrait figurer en haut de votre liste de tâches. Ces solutions peuvent vous aider à résoudre ce problème. Correctif 1 – Placer l’application Horloge Si vous avez supprimé par erreur l’application Horloge de votre écran d’accueil, vous pouvez remettre l’application Horloge à sa place. Étape 1 – Déverrouillez votre iPhone et commencez à faire glisser votre doigt vers la gauche jusqu'à atteindre la page Bibliothèque d'applications. Étape 2 – Ensuite, recherchez « horloge » dans le champ de recherche. Étape 3 – Lorsque vous voyez « Horloge » ci-dessous dans les résultats de recherche, maintenez-la enfoncée et
