Méthode de requête vue-cli axios et problèmes de traitement inter-domaines

Cet article présente principalement la méthode de requête vue-cli axios et les problèmes de traitement inter-domaines. L'article mentionne également axios en vue pour résoudre les problèmes inter-domaines et l'utilisation d'intercepteurs. qui en ont besoin Pour référence

Méthode de requête vue-cli axios et traitement inter-domaines

• 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 cette connaissance résout le problème inter-domaine dans l'environnement de développement (dev). Dans l'environnement de production, s'il est effectivement déployé sur le serveur, il y aura toujours des problèmes inter-domaines. s'il n'est 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);
   });

demande de publication

  axios.post('/user', {
    userId: '10001' //注意post请求发送参数的方式和get请求方式是有区别的
   }).then(function (response) {
    console.log(response);
   }).catch(function (error) {
    console.log(error);
   });

Supplémentaire :

Axios dans Vue résout les problèmes inter-domaines et utilise des intercepteurs

1. Axios dans Vue ne prend pas en charge la méthode de déclaration 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 l'utiliser pour copier les données demandées dans les données d'axios. Vous pouvez utiliser la flèche. fonctions.

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 mutuelle non originale, vous pouvez accéder à 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'即可
    }
   }

<.>

Le problème inter-domaines est réussi, mais cela ne résout le problème inter-domaines que dans l'environnement de développement (dev). Dans l'environnement de production, s'il est effectivement déployé sur le serveur, il y en aura toujours. problèmes inter-domaines s'il ne vient pas de la même origine, comme le port serveur que nous avons déployé. Il s'agit du 3001, ce qui nécessite un débogage conjoint des frontaux et arrières. Dans un premier temps, nous pouvons tester le front-end dans deux environnements : production. et développement. Dans config/dev.env.js et prod.env.js, ils se trouvent respectivement dans l'environnement de développement/production. Configurez l'adresse demandée API_HOST. Dans l'environnement de développement, nous utilisons l'adresse proxy api configurée ci-dessus, et dans. l'environnement de production, nous utilisons l'adresse d'interface normale, alors configurez-la comme ceci. Effectuez les configurations suivantes dans les fichiers

et config/dev.env.js respectivement. prod.env.js

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, vous devez généralement définir le type de contenu, le type de contenu à envoyer, l'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 ? Au 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, nous sommes parfois amenés à reconnectez-vous avant d'accéder à cette page, ce qui signifie que l'authentification de l'identité a échoué, par exemple que le jeton est perdu, ou que le jeton existe toujours localement, mais il a expiré, donc le simple fait de juger 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.

Nous pouvons filtrer cette situation avant d'envoyer toutes les requêtes et avant d'exploiter les données de réponse du serveur.

// 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) 
  });

Regardez ci-dessous

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'即可
    }
   }
  }

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Ajax获取响应内容长度的方法

Ajax方式实现定期更新页面某块内容的方法

ajax读取properties资源文件数据的方法

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!