Lösung für das domänenübergreifende Problem der SpringBoot- und Vue-Interaktion

Hallo, ich bin Gray Ape, ein Programmierer, der wirklich gut darin ist, Bugs zu schreiben!

Same Origin-Richtlinie für Browser

Warum treten domänenübergreifende Probleme auf? Zunächst müssen wir eine Definition verstehen, nämlich die Homologierichtlinie des Browsers.

Was ist die Same-Origin-Policy des Browsers? Einfach ausgedrückt müssen das Protokoll, der Domänenname und der Port, die der Browser zum Senden der Anfrage verwendet, mit dem Protokoll, dem Domänennamen und dem Port übereinstimmen, die der Server zum Empfangen der Anfrage verwendet. Dies ist die einzige Möglichkeit, die Interaktion abzuschließen, aber es ist offensichtlich unmöglich, insbesondere wenn ein Projekt mit getrenntem Front-End und Back-End auf demselben Computer entwickelt wird, müssen zwei Ports verwendet werden. Dadurch entsteht ein domänenübergreifendes Problem.

Hier erkläre ich zwei Methoden, die ich zur Lösung domänenübergreifender Probleme verwendet habe.

1. Der VUE-Frontend-Konfigurationsproxy löst domänenübergreifende

(1) Browseranforderungen zum Übertragen von Cookies in Vue zulassen

Lassen Sie mich zunächst erzählen, wie ich das Cross-Domain-Problem entdeckt habe. Als ich zunächst eine Anfrage vom Frontend-Browser an das Backend schickte, habe ich die Cookies des Browsers nicht mitgeführt, was es jedoch unmöglich machte, die Anfrage des Browsers zu verifizieren. Daher habe ich später eine Methode verwendet, die den Browser bei jeder Anfrage das Cookie im HTTP-Anfrageheader mitführen lässt. Die Methode ist wie folgt:

Schreiben Sie den folgenden Code in die main.js-Methode von vue:

// Axios-Abhängigkeit einführen importiere Axios von 'Axios'
//Die Anfrage soll das Cookie des Browsers enthalten
axios.defaults.withCredentials=true
Vue.prototype.$axios = axios

Das Obige bedeutet, dass Axios-Anfragen, also Ajax-Anfragen, eingeführt werden und gleichzeitig das Schreiben von Anmeldeinformationen aktiviert wird. Cookies werden nur übertragen, wenn withCredentials gleich true ist.

(2) Konfigurieren Sie den Proxy in Vue, um domänenübergreifende Probleme zu lösen

Das Cross-Domain-Problem in Vue zu lösen ist eigentlich ganz einfach, denn jedes Mal, wenn unser Browser eine Anfrage sendet, muss die erste Hälfte der URL gleich sein, also etwa http://localhost:8080/blogs und http://localhost:8080/login . Wir können ihre identischen URLs extrahieren und sie in axios.defaults.baseURL kapseln. Auf diese Weise können wir die Anfrageadresse jedes Mal, wenn wir eine Anfrage stellen, auf “/blogs” verkürzen, was einer einfachen Kapselung des URL-Headers entspricht.

Hinweis: Setzen Sie axios.defaults.baseURL =
"http://localhost:8080" In axios.js sollte axios.defaults.baseURL =
"http://localhost:8080" stehen

Aber beim Lösen von domänenübergreifenden Problemen sollten wir axios.defaults.baseURL = "http://localhost:8080" als axios.defaults.baseURL = “/api” schreiben.
Auf diese Weise wird dem Pfad jeder Anforderung “/api” vorangestellt.
Dies ist auch der erste Schritt:

Der erste Schritt besteht darin, einen einheitlichen Zugriffspfad einzurichten

Setzen Sie in axios.js axios.defaults.baseURL = "http://localhost:8080"寫成axios.defaults.baseURL = "/api"

Schritt 2: Domänenübergreifenden Proxy konfigurieren

Erstellen Sie eine neue JS-Datei vue.config.js im selben Verzeichnis wie babel.config.js

Schreiben Sie den folgenden Code hinein: Dieser Code ist ein Proxy, der zur Lösung des Cross-Domain-Problems konfiguriert ist. Die Verbindungsanforderung meines Backend-Servers lautet http://localhost:8081. Wenn Ihre Verbindung also nicht lautet, müssen Sie sie ändern.

/**
 * Lösen Sie domänenübergreifende Probleme* @type {{devServer: {proxy: {"/api": {changeOrigin: boolean, pathRewrite: {"^/api": string}, target: string}}, host: string, open: boolean}}}
 */
modul.exporte = {
    devServer: {
        Host: "localhost",
        open: true, // Browser automatisch öffnen // Proxy-Konfigurationstabelle, in der Sie spezifische Anfrage-Proxys für die entsprechende API-Schnittstelle konfigurieren können // Beispielsweise Proxy 'localhost:8080/api/xxx' für 'www.example.com/api/xxx'
        Proxy: {
            '/api': { // Alle Anfragepfade abgleichen, die mit '/api' beginnentarget: 'http://localhost:8081', // Basispfad des Proxy-Ziels//secure: false, // Wenn es eine https-Schnittstelle ist, müssen Sie diesen Parameter konfigurierenchangeOrigin: true, // Domänenübergreifenden Pfad unterstützenRewrite: { // Pfad neu schreiben: Entfernen Sie das '/api' am Anfang des Pfads
                    '^/api': ''
                }
            }
        }
    }
}

Schritt 3: Testanfrage

Wenn wir jetzt eine Login-Anfrage senden möchten, sollte die Anfrage folgendermaßen geschrieben sein:

dies.$axios.post("/login")

2. Die Springboot-Backend-Konfiguration löst domänenübergreifende

Um das Cross-Domain-Problem im Backend des Springboot-Frameworks zu lösen, müssen Sie nur eine Klasse CorsConfig hinzufügen und sie die Schnittstelle WebMvcConfigurer implementieren lassen. Der Code lautet wie folgt. Im Allgemeinen können Sie den Code während der Entwicklung einfach kopieren.

importiere org.springframework.context.annotation.Configuration;
importiere org.springframework.web.servlet.config.annotation.CorsRegistry;
importiere org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * Domänenübergreifende Probleme lösen */
@Konfiguration
öffentliche Klasse CorsConfig implementiert WebMvcConfigurer {

    @Überschreiben
    public void addCorsMappings(CorsRegistry-Registrierung) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONEN")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");

    }
}

Die oben genannten Methoden habe ich zur Lösung domänenübergreifender Probleme verwendet. Ich habe im Internet auch viele Methoden zur Lösung domänenübergreifender Probleme gefunden, aber sie waren kompliziert. Nachdem ich selbst versucht und recherchiert hatte, konnte ich die beiden oben genannten Methoden erfolgreich testen. Sowohl das Front-End als auch das Back-End wurden zu diesem Zeitpunkt konfiguriert.

Wenn Sie also anderer Meinung sind oder bessere Methoden haben, weisen Sie uns gerne darauf hin!

Ich bin Gray Ape, bis zum nächsten Mal!

Dies ist das Ende dieses Artikels über die Lösung des domänenübergreifenden Problems der SpringBoot- und Vue-Interaktion. Weitere relevante Inhalte zur SpringBoot- und Vue-Interaktion 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!