So verwenden Sie vue2.0axios domänenübergreifend und rendern

Dieses Mal zeige ich Ihnen, wie Sie vue2.0axios für domänenübergreifendes Rendern verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von vue2.0axios für domänenübergreifendes Rendern? , lass uns einen Blick darauf werfen.

(Scaffolding vue-cli verwendet)

Schritt eins: Verwenden Sie die folgende Deklaration in main.js mit

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

Dann können Sie in anderen Vue-Komponenten dies.$axios aufrufen und

Schritt 2: ProxyTable im Webpack konfigurieren (Index unter 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'即可
}
}
},

Schritt 3:

Probieren Sie es aus, die domänenübergreifende Arbeit ist erfolgreich, aber bitte beachten Sie: Ja, Dies ist nur ein domänenübergreifendes Problem, das in der Entwicklungsumgebung (dev) gelöst wird. Wenn es tatsächlich auf dem Server in der Produktionsumgebung bereitgestellt wird, treten immer noch domänenübergreifende Probleme auf, wenn es nicht aus derselben Quelle stammt. Der von uns bereitgestellte Server-Port ist 3001, was ein gemeinsames Debuggen des Front-Ends und des Back-Ends erfordert. Für ein einstufiges Front-End können wir es separat in Produktions- und Entwicklungsumgebungen in config/dev.env.js und prod testen. env.js, also in der Entwicklungs-/Produktionsumgebung, konfigurieren Sie die angeforderte Adresse API_HOST. In der Entwicklungsumgebung verwenden wir die oben konfigurierte Proxy-Adress-API und verwenden die normale Schnittstellenadresse in der Produktionsumgebung, also konfigurieren Sie sie wie folgt

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

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

Natürlich können Sie http://api direkt anfordern, egal ob in der Entwicklungs- oder Produktionsumgebung. Nach der Konfiguration erkennt das Programm beim Testen automatisch, ob es sich um eine Entwicklungs- oder Produktionsumgebung handelt, und passt dann automatisch API_HOST an. Wir können in jeder Komponente Prozess.env.API_HOST verwenden, um Adressen wie

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

zu verwenden und dann zweitens: Konfigurieren Sie einfach Cros domänenübergreifend auf dem Backend-Server, was access-control-allow-origin: * bedeutet, dass jeder Zugriff erlaubt ist. Zusammenfassend lässt sich sagen: In der Entwicklungsumgebung kann unser Front-End einen domänenübergreifenden Proxy-Agenten konfigurieren. In einer realen Produktionsumgebung benötigen wir weiterhin die Zusammenarbeit mit dem Back-End. Ein bestimmter Experte sagte: Diese Methode ist in IE9 und darunter nicht einfach zu verwenden. Wenn Kompatibilität erforderlich ist, besteht der beste Weg darin, einen Proxy zum Server-Port im Backend hinzuzufügen. Der Effekt ähnelt dem des Webpack-Proxys.

Schritt 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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie unter Bitte beachten Sie die chinesische PHP-Website und andere verwandte Artikel!

Empfohlene Lektüre:

So verwenden Sie xe-utils in vue

vue-router zeigt beim Erstellen keine Routen an So gehen Sie mit der Seite um

Das obige ist der detaillierte Inhalt vonSo verwenden Sie vue2.0axios domänenübergreifend und rendern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!