Wie löst Vue das domänenübergreifende Problem des Axios-Request-Frontends?

Vorwort

Als ich kürzlich ein reines Front-End-Vue-Projekt schrieb, stieß ich auf ein Problem: Access meldete eine 404-Fehlermeldung, als Axios lokale Ressourcen anforderte. Dies ist mir sehr unangenehm. Nach Überprüfung der Informationen stellte sich heraus, dass es sich um ein domänenübergreifendes Problem handelte.

Es gibt viele Lösungen für domänenübergreifende Probleme bei der normalen Entwicklung. Am häufigsten ändert das Backend den Antwortheader. Das Frontend lässt sich aber auch über einen Reverse-Proxy lösen. Um solche Fehler beim nächsten Mal zu vermeiden, sollten Sie diese aufzeichnen und zusammenfassen.

Lassen Sie uns das Problem jetzt überprüfen und lösen.

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

Domänenübergreifend: Wenn ein Browser Ressourcen einer Webseite unter einem Domänennamen von einem anderen anfordert, handelt es sich um domänenübergreifenden Zugriff, wenn Domänenname, Port oder Protokoll unterschiedlich sind.

Im Front-End- und Back-End-Trennungsmodus sind die Domänennamen des Front-Ends und des Back-Ends inkonsistent und es treten domänenübergreifende Zugriffsprobleme auf. Das Cross-Domain-Problem rührt von der Same-Origin-Policy von JavaScript her. Dies bedeutet, dass gegenseitiger Zugriff nur erlaubt ist, wenn Protokoll + Hostname + Portnummer (sofern vorhanden) identisch sind. Das heißt, JavaScript kann nur auf Ressourcen in seiner eigenen Domäne zugreifen und diese betreiben, nicht aber auf Ressourcen in anderen Domänen. Das domänenübergreifende Problem betrifft JS und Ajax. Axios ist eine Kapselung der Ajax-Technologie durch Promise und weist ebenfalls domänenübergreifende Probleme auf.

2. Lösung

Hier werde ich diese Maschine verwenden, um zwei verschiedene Ports zum Testen zu öffnen.

Nicht behandelter domänenübergreifender Fehler

Es liegt keine domänenübergreifende Verarbeitungsanforderung vor.

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

Ressourcenfreigabe zwischen verschiedenen Ursprüngen (CORS)

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

1. Der Port des Vue-Projekts ist 8081

2. Öffnen Sie Port 8080 auf Ihrem Computer und die Anfrage /getData gibt JSON-Daten zurück.

3. Konfigurieren Sie den Proxy

1. In vue2.0

Ändern Sie die Datei „index.js“ im Konfigurationsordner und fügen Sie den folgenden Code zu „proxyTable“ hinzu:

   Proxy-Tabelle: {
      '/APIs': {
        target: 'http://localhost:8080/', //Domänenname zum Auflösen der domänenübergreifenden Schnittstellesecure:false, //Wenn es sich um eine https-Schnittstelle handelt, müssen Sie diesen Parameter konfigurierenchangeOrigin: true, //Wenn die Schnittstelle domänenübergreifend ist, müssen Sie diesen Parameter konfigurierenpathRewrite: {
          '^/apis': '' // Pfadumschreibung}
      },
    },

Dann schreiben Sie dies in die Axios-Anfrage

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

analysieren:

Auf das Ziel folgt der öffentliche Teil der anzufordernden URL, und dann wird /apis als Proxy verwendet. Schließlich werden einige Pfade umgeschrieben und unsere Proxy-APIs werden bei der Anforderung als Präfix verwendet.

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

Domänenübergreifende Lösung

2. In vue3.0

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

Erstellen Sie eine neue vue.config.js und konfigurieren Sie die folgenden Informationen, um das Problem zu lösen.

modul.exporte = {   
    devServer: {
        Proxy: {
            '^/api': {
                Ziel: 'http://localhost:8080/', //Schnittstellenpräfix ws:true, //Proxy-WebSocket
                changeOrigin:true, //Die virtuelle Site muss den Ursprung ändern
                PfadUmschreiben:{
                    '^/api':''//Pfad neu schreiben}
            }
        }
    }
}

Zusammenfassung:

changeOrigin: true : Proxy einschalten: Ein gefälschter Server wird lokal erstellt und dann werden die angeforderten Daten gleichzeitig gesendet und empfangen, sodass Server und Server miteinander interagieren können.

apis ist das Präfix der tatsächlichen Schnittstellenanforderung, das den öffentlichen Teil unseres tatsächlichen Schnittstellenpräfixes vermittelt, d. h. Protokoll + Hostname + Portnummer

Wenn die Anforderungsschnittstelle beispielsweise localhost:8080/getData müssen wir nur Folgendes übergeben: getData
Dann ist der öffentliche Domänenname localhost:8080/ und wir ändern einfach den öffentlichen Domänennamen der Anforderungsschnittstelle localhost:8080/ in api/ !

Führen Sie das Projekt aus und Sie können sehen, dass der Pfad der Schnittstellenanforderung lautet: localhost:8081/apis/getData

Nach dem Aufrufen des Proxys lautet der eigentliche Anforderungspfad: localhost:8080/getData

Abschließende Gedanken

Sie sollten während des Lernens noch mehr offizielle Dokumente lesen. Zu domänenübergreifenden und anderen Konfigurationsproblemen bieten die offiziellen Dokumente auch viele Konfigurationsinformationen, Vue CLI-Konfiguration

Um das jüngste Phänomen zusammenzufassen: Solange Sie nicht zu Tode erschöpft sind, werden Sie bis zum Tod hart arbeiten. Kommt alle schon.

Dies ist das Ende dieses Artikels darüber, wie Vue das Front-End-Cross-Domain-Problem von Axios-Anfragen löst. Weitere relevante Inhalte darüber, wie Vue das Front-End-Cross-Domain-Problem von Axios-Anfragen löst, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!