Zusammenfassung der domänenübergreifenden Problembehandlung und -lösungen von Vue

Wenn Sie eine Netzwerkanfrage senden, werden die folgenden gespeicherten Informationen angezeigt. Herzlichen Glückwunsch, Sie haben die Domäne überschritten.

Der Zugriff auf XMLHttpRequest bei 'XXXXX' vom Ursprung 'XXXXXX' wurde blockiert durch
CORS-Richtlinie: Die Antwort auf die Preflight-Anforderung besteht die Zugriffskontrollprüfung nicht:
Auf der angeforderten Ressource ist kein „Access-Control-Allow-Origin“-Header vorhanden.

1.1 Was ist Cross-Domain?

Das Cross-Domain-Problem entsteht aufgrund der Homologierichtlinie des Browsers. Die sogenannte Homologie bedeutet, dass die beiden Seiten dasselbe Protokoll, denselben Host und dieselbe Portnummer haben. Dies ist die Kern- und Grundfunktion des Browsers. Ohne die Homologierichtlinie wäre unser Browser sehr unsicher und könnte jederzeit angegriffen werden.

Wenn einer der Protokollnamen, Domänennamen und Portnummern unterschiedlich sind, tritt ein domänenübergreifendes Problem auf.

Hier ist hervorzuheben, dass Cross-Domain-Verarbeitung nicht bedeutet, dass die Anfrage nicht gesendet wurde. Es bedeutet, dass die Anfrage erfolgreich gesendet wurde und der Server die Daten auch an Sie zurückgegeben hat, der Browser sie jedoch aus Sicherheitsgründen abgelehnt hat.

2.2 Wie löst man das domänenübergreifende Problem?

1. Methode 1

Wenn die Bedingungen es zulassen, können Sie mit dem Backend kommunizieren. Das Backend fügt beim Antworten einen Antwortheader hinzu, und das Frontend kann domänenübergreifend ohne Operation arbeiten.

2. Methode 2

Das Vue-Scaffolding bietet eine sehr einfache Methode:

Wenn Sie cli3 oder höher verwenden, befindet sich im Verzeichnis keine Konfigurationsdatei. Sie müssen im Stammverzeichnis eine Datei vue.config.js erstellen und die benötigten Konfigurationsinformationen hinzufügen.

module.exports={
    Seiten: {
        Index: {
        //Eintrag:"src/main.js",
        },
    },
    devServer: {
        Proxy: {
            '/api': {
                Ziel: 'Anzufordernde URL',
                Pfad neu schreiben: {'^/api':''},
                ws: wahr,
                changeOrigin: true
            }
        }
    }
}

Es wird ein Proxyserver erstellt, um Daten vom Backend statt vom Browser anzufordern, da zwischen dem Server kein domänenübergreifendes Problem besteht.

Der Protokolldomänenname und die Portnummer dieses Proxyservers sind dieselben wie der Protokolldomänenname und die Portnummer, wenn Sie das Projekt ausführen. Sie können

Verwenden Sie http://localhost:8080/api. Wenn Sie beim Anfordern von Daten /api hinzufügen, wird erkannt, dass Sie domänenübergreifend vorgehen müssen. Wenn Sie es nicht hinzufügen, greifen Sie auf die entsprechenden Daten im Stammverzeichnis des Projekts zu.

3. Methode 3

Verwendet jsonp, kann aber nur GET-Anfragen wie Post, Put, Patch usw. verarbeiten.

Dies ist das Ende dieses Artikels über die Handhabung domänenübergreifender Probleme durch Vue. Weitere relevante Inhalte zur Handhabung domänenübergreifender Probleme durch Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!