Comment utiliser le cross-domaine et le rendu de vue2.0axios

Cette fois, je vais vous montrer comment utiliser le rendu inter-domaines vue2.0axios et quelles sont les précautions lors de l'utilisation du rendu et du rendu inter-domaines vue2.0axios. Ce qui suit est un cas pratique, allons-y. jetez un oeil.

(Scaffolding vue-cli utilisé)

Première étape : utilisez la déclaration suivante dans main.js en utilisant

import axios from
'axios';
Vue.prototype.$axios=axios;

Ensuite, dans d'autres composants vue, vous pouvez appeler this.$axios et utiliser

Étape 2 : Configurer proxyTable dans le webpack (index sous config .js)

dev:
 { 
加入以下
proxyTable:
{
'/api':
{
target:
'http://api.douban.com',//设置你调用的接口域名和端口号
 别忘了加http 
changeOrigin:
true,
pathRewrite:
 { 
'^/api':
'/'//这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替
 
比如我要调用'http://api.douban.com/v2/movie/top250'，直接写‘/api/v2/movie/top250'即可
}
}
},

Étape 3 :

Essayez-le, le cross-domain est réussi, mais veuillez noter Oui, il s'agit simplement d'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 de la même source. 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.Chapitre Pour le front-end en une étape, nous pouvons le tester séparément dans les environnements de production et de 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 et utilisons l'adresse d'interface normale dans l'environnement de production, donc configurez-la comme ceci.

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',//开发环境
 API_HOST:"/api/"
})

module.exports = {
 NODE_ENV: '"production"',//生产环境
 API_HOST:'"http://api.douban.com"'
}

Bien sûr, vous pouvez directement demander http://api que ce soit en environnement de développement ou de production douban.com. Après la configuration, le programme déterminera automatiquement s'il s'agit d'un environnement de développement ou de production pendant les tests, puis fera automatiquement correspondre API_HOST. Nous pouvons utiliser process.env.API_HOST dans n'importe quel composant pour utiliser des adresses telles que

instance.post(process.env.API_HOST+'user/login', this.form)

. puis deuxièmement, configurez simplement cros cross-domain sur le serveur backend, qui est access-control-allow-origin : * signifie autoriser tous les accès. Pour résumer : dans l'environnement de développement, notre front-end peut configurer un agent proxy pour inter-domaines. Dans un environnement de production réel, nous avons toujours 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.

Étape 4 :

<template>
<p>
  <ul>
    <li v-for="item in movieArr">
      <span>{{item.title}}</span>
    </li>
  </ul>
  <button @click="sayOut">渲染</button>
</p>
</template>
<script>
export default {
 data () {
  return {
    movieArr : []
  }
 },
 methods: {
   sayOut () {
     this.$axios.get('/api/v2/movie/top250')
    .then((response) => {
       console.log(response.data.subjects)
       this.movieArr = response.data.subjects // 这里要强调一下这个this 箭头函数指的是它的父级也就是vue实例 然后不用箭头函数的话 this是一个undefined 无法.movieArr来给他赋值 这里要注意一下 我被坑了半天 希望小伙伴不要被坑
    })
   }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. veuillez faire attention au site Web chinois php Autres articles connexes !

Lecture recommandée :

Comment utiliser xe-utils dans vue

vue-router n'affiche pas les itinéraires lors de la construction Comment gérer la page

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!