Domänenübergreifende Probleme bei der Trennung von Front-End und Back-End von Vue+SpringBoot

Bei der getrennten Entwicklung von Front-End und Back-End muss das Front-End die Back-End-API aufrufen und den Inhalt anzeigen. Wenn sich die Front-End- und Back-End-Entwicklung beide auf demselben Host befinden, treten aufgrund der Homologierichtlinienbeschränkungen des Browsers domänenübergreifende Probleme (unterschiedliche Protokolle, Domänennamen, Portnummern usw.) auf, was dazu führt, dass die API-Schnittstelle nicht normal aufgerufen werden kann, was die Entwicklung beeinträchtigt.

Kapselung von API-Anfragen

Axios von „Axios“ importieren

//axios.create erstellt eine Axios-Instanz und schreibt die Konfiguration für die Instanz. Alle nachfolgenden Anfragen, die über die Instanz gesendet werden, unterliegen der aktuellen Konfiguration. const $http = axios.create({
    Basis-URL: '',
    Zeitüberschreitung: 1000,
    //Header: {'X-Custom-Header': 'foobar'}
});

// Anfrage-Interceptor hinzufügen $http.interceptors.request.use(function (config) {
    // Tun Sie etwas, bevor Sie die Anfrage senden. Return-Konfiguration;
}, Funktion (Fehler) {
    // Etwas mit dem Anforderungsfehler tun return Promise.reject(error);
});

// Antwort-Interceptor hinzufügen $http.interceptors.response.use(function (response) {
    // Etwas mit den Antwortdaten machen return response.data; // Den Datenteil der Antwortdaten zurückgeben }, function (error) {
    // Etwas gegen den Fehler unternehmen return Promise.reject(error);
});

Standardmäßig exportieren $http

API-Aufruffunktion

exportiere const getCourses = () => {
gibt $http.get('http://localhost:8080/teacher/courses') zurück
} 

In diesem Beispiel verwendet das Front-End Port 8081, das Back-End verwendet Port 8080 und das Front-End kann keine Daten durch Aufruf der API anfordern.

Postman testet, ob diese API-Schnittstelle normal ist

Wie löst man das Homologieproblem?

1. Erstellen Sie eine neue Datei vue.config.js im Stammverzeichnis von vue und konfigurieren Sie sie

vue.config.js-Datei

modul.exporte = {
    devServer: {
        Host: 'localhost', //Hostnummer Port: 8081, //Portnummer open: true, //Browser-Proxy automatisch öffnen: {
            '/api': {
                target: „http://localhost:8080/“, //Domänenname der Schnittstelle changeOrigin: true, //Ist es domänenübergreifend? ws: true, //Ist es ein Proxy für WebSockets?
                secure: true, //Ob https-Schnittstelle pathRewrite: { //Pfad zurückgesetzt '^/api': '/'
                }
            }
        }
    }
};

2. API-Anfrage ändern

API-Aufruffunktion

exportiere const getCourses = () => {
  gibt $http.get('/api/teacher/courses') zurück
}

Da vue.config.js den Domänennamen der Schnittstelle konfiguriert, muss hier nur der Rest in die URL geschrieben werden

Vollständiger URL-Text

http://localhost:8080/teacher/courses

Aufgrund der Proxy-Verwendung fügen Sie hier jedoch vor dem verbleibenden Teil (d. h. „/teacher/courses“) „/api“ hinzu, um „/api/teacher/courses“ zu bilden.

An diesem Punkt ist das domänenübergreifende Problem gelöst und das Front-End kann Daten von der Back-End-Schnittstelle abrufen und anzeigen

Problem gelöst!

Dies ist das Ende dieses Artikels über das domänenübergreifende Problem bei der Trennung von Front-End und Back-End von Vue+SpringBoot. Weitere relevante domänenübergreifende Inhalte zur Trennung von Front-End und Back-End von Vue SpringBoot 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!