Lösung für das Problem des domänenübergreifenden Renderns von vue2.0 axios

Im Folgenden werde ich Ihnen eine Lösung für das domänenübergreifende Rendern von vue2.0-Axios vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

(Scaffolding vue-cli verwendet)

Schritt 1: Verwenden Sie die folgende Deklaration in main.js

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

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

Schritt 2: ProxyTable(config in webpack index.js unter konfigurieren) verwenden )

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, Das domänenübergreifende Problem ist erfolgreich, aber bitte beachten Sie, dass es sich hierbei nur um ein domänenübergreifendes Problem handelt, das in der Entwicklungsumgebung (dev) gelöst wird. Wenn es in der Produktionsumgebung tatsächlich auf dem Server bereitgestellt wird, treten weiterhin domänenübergreifende Probleme auf Wenn es nicht vom gleichen Ursprung ist, wie in unserem Fall, ist der bereitgestellte Server-Port 3001, was ein gemeinsames Debuggen von Front-End und Back-End erfordert. Im ersten Schritt können wir das Front-End in zwei Umgebungen testen: Produktion und development. In config/dev.env.js ist es development/. Konfigurieren Sie die angeforderte Adresse API_HOST. In der Entwicklungsumgebung verwenden wir die oben konfigurierte Proxy-Adresse Umgebung verwenden wir die normale Schnittstellenadresse, also konfigurieren Sie sie so

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

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

Natürlich Sie kann http://api.douban.com sowohl in Entwicklungs- als auch in Produktionsumgebungen direkt anfordern. Nach der Konfiguration ermittelt 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

zu verwenden

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

Dann kann der Back-End-Server im zweiten Schritt Cros domänenübergreifend konfigurieren, was access-control-allow-origin: * bedeutet, allen Zugriff zuzulassen. 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 die beste Möglichkeit darin, dem Server-Port im Backend einen Proxy 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(&#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>

Das Obige habe ich für alle zusammengestellt, ich Ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

Lösung für das Optionsüberlagerungsproblem von select in Laui

Vue.js benutzerdefinierte Ereignisformulareingabe Komponentenmethode

Eine Zusammenfassung verschiedener Möglichkeiten, Komponenten bei Vue zu registrieren

Das obige ist der detaillierte Inhalt vonLösung für das Problem des domänenübergreifenden Renderns von vue2.0 axios. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!