Wie löst Vue das domänenübergreifende Front-End-Problem in Axios-Anfragen (detailliertes Beispiel)?

Dieser Artikel vermittelt Ihnen relevantes Wissen darüber, wie Vue domänenübergreifende Front-End-Probleme in Axios-Anfragen löst. Ich hoffe, dass er für alle hilfreich ist.

Es gibt viele Lösungen für domänenübergreifende Probleme in der normalen Entwicklung. Die häufigste Ursache ist, dass das Backend den Antwortheader ändert. Das Frontend kann aber auch über einen Reverse-Proxy gelöst werden. Um zu verhindern, dass solche Fehler beim nächsten Mal passieren, notieren Sie sie und fassen Sie sie zusammen.

So, jetzt schauen wir uns das Problem an und lösen es.

1. Warum treten domänenübergreifende Probleme auf?

Domänenübergreifend: Wenn der Browser Ressourcen von einer Webseite eines Domänennamens zu einem anderen Domänennamen anfordert und der Domänenname, der Port oder das Protokoll unterschiedlich sind, handelt es sich um domänenübergreifend.

Im Front-End- und Back-End-Trennmodus sind die Domänennamen des Front-Ends und des Back-Ends inkonsistent und es treten domänenübergreifende Zugriffsprobleme auf. Das domänenübergreifende Problem ergibt sich aus der Same-Origin-Richtlinie von JavaScript, d. h. nur wenn Protokoll + Hostname + Portnummer (sofern vorhanden) identisch sind, ist gegenseitiger Zugriff zulässig. Mit anderen Worten: JavaScript kann nur auf Ressourcen in seiner eigenen Domäne zugreifen und diese betreiben, nicht jedoch auf Ressourcen in anderen Domänen zugreifen und diese betreiben. Domänenübergreifende Probleme treten bei JS und Ajax auf. Axios ist eine Kapselung der Ajax-Technologie durch Promise, und es gibt auch domänenübergreifende Probleme.

2. Lösung

Hier werde ich den lokalen Computer verwenden, um zwei verschiedene Ports zum Testen zu öffnen.

Der vor der domänenübergreifenden Lösung gemeldete Fehler wird nicht verarbeitet. Die Anfrage wird nicht domänenübergreifend verarbeitet. Das ist so:

 axios.get('http://localhost:8080/getData')
 .then(res => {
   console.log(res)
 })
 .catch(err => {
   console.error(err); 
 })

Reverse-Proxy

Das Frontend führt einen Reverse-Proxy aus, um domänenübergreifend zu lösen Probleme. Das schematische Diagramm sieht wie folgt aus:

Der Port des Vue-Projekts ist 8081

Mein Computer hat einen Port 8080 geöffnet und durch die Anforderung von /getData werden die JSON-Daten zurückgesetzt.

Konfigurieren des Proxys

1. Ändern Sie in vue2.0

die Datei index.js im Konfigurationsordner und fügen Sie den folgenden Code zur Proxy-Tabelle hinzu:

   proxyTable: {
      '/apis': {
        target: 'http://localhost:8080/',  //要解决跨域的接口的域名
        secure:false,           //如果是https接口，需要配置这个参数
        changeOrigin: true,  // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '^/apis': ''  // 路径重写
        }
      },
    },

Dann schreiben Sie dies in Axios in die Anfrage

 axios.get('apis/getData')
 .then(res => {
   console.log(res)
 })
 .catch(err => {
   console.error(err); 
 })

Analyse: Was auf das

Ziel folgt, ist der öffentliche Teil der URL, der angefordert werden muss. Verwenden Sie dann /apis als Proxy, schreiben Sie schließlich einige Pfade neu und verwenden Sie bei der Anforderung die APIs unseres Proxys als Präfix.

Wir können dieses Präfix anpassen. Die Tabelle ist ein Objekt, sodass wir mehrere Proxys konfigurieren können.

Domänenübergreifende Lösung

2. In vue3.0

vue-cli3 Nachdem das Gerüst erstellt wurde, befindet sich keine vue.config.js-Datei im Projektverzeichnis und muss erstellt werden Manuell

Erstellen Sie eine neue vue.config .js, konfigurieren Sie die folgenden Informationen, es kann auch gelöst werden.

module.exports = {   
    devServer: {
        proxy: {
            '^/api': {
                target: 'http://localhost:8080/',//接口的前缀
                ws:true,//代理websocked
                changeOrigin:true,//虚拟的站点需要更管origin
                pathRewrite:{
                    '^/api':''//重写路径
                }
            }
        }
    }
}

Zusammenfassung:

changeOrigin: true : Aktivieren Sie den Proxy: Ein gefälschter Server wird lokal erstellt und sendet dann die angeforderten Daten und empfängt gleichzeitig die angeforderten Daten, sodass der Server und der Server dies können miteinander interagieren.

apis ist das Präfix der eigentlichen Anforderung der Schnittstelle, die den öffentlichen Teil unseres eigentlichen Schnittstellenpräfixes weiterleitet, also Protokoll + Hostname + Portnummer

Die Anforderungsschnittstelle ist beispielsweise localhost:8080/getData. Wir müssen nur Folgendes übergeben: getData

Dann lautet der öffentliche Domänenname localhost:8080/. Wir fordern die Änderung des öffentlichen Domänennamens der Schnittstelle localhost:8080/ an.

Führen Sie das Projekt aus Sehen Sie, dass der von der Schnittstelle angeforderte Pfad lautet: localhost:8081/ apis/getData

Nach der Eingabe des Proxys lautet der tatsächliche Anforderungspfad: localhost:8080/getData

[Verwandte Empfehlung: „

vue.js-Tutorial

“]

Das obige ist der detaillierte Inhalt vonWie löst Vue das domänenübergreifende Front-End-Problem in Axios-Anfragen (detailliertes Beispiel)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!