Solution au problème du rendu inter-domaines vue2.0 axios

Ci-dessous, je vais partager avec vous une solution au problème du rendu inter-domaines de vue2.0 axios. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

(Échafaudage vue-cli utilisé)

Étape 1 : Utilisez la déclaration suivante dans main.js

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 webpack (index. js sous config)

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 qu'il ne s'agit que d'un problème cross-domain résolu 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. être cross-domain s'il n'est pas de la même origine. Problème, 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. Dans un premier temps, nous pouvons tester le front-end en deux. environnements : production et développement. Dans config/dev.env.js et prod.env.js C'est-à-dire configurer l'adresse demandée API_HOST respectivement dans l'environnement de développement/production, nous utilisons l'adresse proxy api configurée. ci-dessus, et dans l'environnement de production, nous utilisons l'adresse normale de l'interface, alors 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 demander directement http://api.douban.com dans les environnements de développement et de production. 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)

Ensuite, dans la deuxième étape, le serveur backend peut configurer cros cross-domain, ce qui est access-control-allow-origin : * signifie autoriser tous les 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.

É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(&#39;/api/v2/movie/top250&#39;)
    .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>

Ce qui précède est ce que j'ai compilé pour vous , j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Solution au problème de superposition d'options de sélection dans layui

Événement personnalisé Vue.js Entrée de formulaire méthode des composants

Un résumé de plusieurs façons d'enregistrer des composants avec vue

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!