Lösen Sie das domänenübergreifende Problem von Vue + SpringBoot + Shiro

Lösen Sie das domänenübergreifende Problem von Vue + SpringBoot + Shiro

Ich glaube, jeder wird beim ersten Start auf dieses Problem stoßen. Ich habe viel im Internet gesucht, aber es ist nutzlos und die Texte sind nicht vollständig.

Ich werde es hier aufzeichnen, ich hoffe, es wird für alle hilfreich sein

1. Konfigurieren Sie das Vue-Frontend

Konfigurieren Sie die Proxy-Informationen in index.js unter config

Hinweis: Die domänenübergreifende Konfiguration hier ist nur in der Entwicklungsumgebung gültig. Nach dem Verpacken und Bereitstellen funktioniert diese domänenübergreifende Konfiguration nicht. Ich stecke hier schon lange fest. Nachdem das Vue-Frontend verpackt ist, ist es am besten, es auf nginx bereitzustellen. Die Verwendung von nginx kann das domänenübergreifende Problem direkt lösen

1. Entwickeln Sie eine domänenübergreifende Konfiguration

Proxy-Tabelle: {
'/api': {
Ziel: 'http://xxxx.com', //AddresschangeOrigin: true,
PfadNeu schreiben: {
'^/api': ''
  },
 }
},

Konfigurieren Sie die Ajax-Proxy-Anforderung in main.js

var axios = erfordern('axios')
axios.defaults.baseURL = '/api' // Umgebung

Wenn wir dann die Anforderungsmethode schreiben, fügen Sie vor der Methode „/api“ hinzu. Dies basiert auf Ihrem Konfigurationsnamen. Schreiben Sie den Namen, den Sie konfiguriert haben.

Auf diese Weise ist unsere domänenübergreifende Front-End-Vue -Entwicklungskonfiguration abgeschlossen

2. Produktionsdomänenübergreifende Konfiguration

Schauen wir uns zunächst die Codekonfiguration an

Ich habe im Internet viele Artikel und Informationen gelesen, in denen es hieß, man solle dies und das ändern, aber die Fakten sind immer dieselben. . . .

Tatsächlich müssen wir nur die Proxy-Informationen in index.js unter config konfigurieren.

Proxy-Tabelle: {
'/api/*': {
Ziel: 'http://Domänenname', //Die Produktionsadresse muss http hinzufügen
changeOrigin: wahr,
PfadNeu schreiben: {
'^/api': '/api'
  },
 }
},

Oben haben wir den Standardanforderungspfad von Axios festgelegt, wenn wir die lokale domänenübergreifende Konfiguration durchführen. Die Produktionsverpackung muss nicht konfiguriert werden.

Jetzt ist unser Code konfiguriert. Ändern Sie nichts weiter. Führen Sie dann npm run build aus und er ist fertig.

Den Rest der Arbeit können Sie nginx überlassen. Ich habe nginx auf dem Windows-Dienst bereitgestellt. Im Internet gibt es viele Installationsschritte, daher werde ich hier nicht näher darauf eingehen.

Nachdem wir nginx installiert haben, müssen wir einige Konfigurationen vornehmen

1. Löschen Sie den Inhalt des HTML-Verzeichnisses unter nginx

2. Kopieren Sie unser Vue-Paket dist in das HTML-Verzeichnis von nginx.

3. Konfigurieren Sie nginx.conf im Konfigurationsverzeichnis unter nginx. Der Konfigurationsinhalt lautet wie folgt:

Hier ist eine Erklärung: Der Dateiverzeichnisname der Nginx-Anwendung wurde geändert. Wir installieren es direkt mit nginx-1.xx, ähnlich diesem Verzeichnis. Wenn wir den Stammpfad in der obigen Abbildung konfigurieren, kann es bei /n zu Kompilierungsproblemen kommen. Ich habe es hier in ProNginx geändert. Sie können es in Ihren bevorzugten Namen ändern

Dies ist meine gesamte Nginx-Konfiguration

#Benutzer niemand;
Arbeiterprozesse 1;

#error_log Protokolle/Fehler.log;
#error_log Protokolle/error.log Hinweis;
#error_log Protokolle/error.log-Info;

#pid-Protokolle/nginx.pid;


Ereignisse {
    Arbeiterverbindungen 1024;
}


http {
    mime.types einschließen;
    Standardtyp Anwendung/Oktett-Stream;

    #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
    # '$status $body_bytes_sent "$http_referer" '
    # '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log Protokolle/access.log Haupt;

    sendfile an;
    #tcp_nopush ein;

    #keepalive_timeout 0;
    KeepAlive-Timeout 65;

    #gzip ein;

Server {
        hören Sie 80;
        Servername: Domänenname/IP des Front-End-Dienstes;
        Stamm D:/HWKJ/ProNginx/ProNginx/html/dist/;
        
        Standort / {
            index.php index.html index.htm;
            Versuchen Sie, Dateien $uri $uri/ /index.html zu versuchen.
        }
            Standort /api/ {
            #umschreiben ^.+api/?(.*)$ /$1 Unterbrechung;
            #einschließen uwsgi_params;
            Proxy-Passwort http://xxxbackgroundxxxx/api/;
            #Lösen Sie das Problem beim Abrufen einer Remote-IP in Springboot}
    }
}

Nach der Konfiguration starten wir nginx. Hier sind einige Betriebsbefehle von nginx

start nginx // Starten nginx -s stop // stop dient zum schnellen Stoppen von nginx und speichert möglicherweise keine relevanten Informationen nginx -s quit // quit dient zum vollständigen und ordnungsgemäßen Stoppen von nginx und zum Speichern relevanter Informationen nginx -s reload // Wenn die Konfigurationsinformationen geändert werden, verwenden Sie diesen Befehl, um die Konfiguration neu zu laden nginx -s reopen // Öffnen Sie die Protokolldatei erneut nginx -v // Zeigen Sie die Nginx-Version an

Auf diese Weise ist unsere domänenübergreifende Front-End-Vue -Produktionskonfiguration abgeschlossen

Als nächstes konfigurieren wir den Spring Boot-Hintergrund

2. Konfigurieren Sie den Spring Boot

Wenn Sie nur Spring Boot haben, können Sie die Informationen konfigurieren

importiere org.springframework.boot.SpringBootConfiguration;
importiere org.springframework.boot.web.servlet.FilterRegistrationBean;
importiere org.springframework.context.annotation.Bean;
importiere org.springframework.context.annotation.Configuration;
importiere org.springframework.web.cors.CorsConfiguration;
importiere org.springframework.web.cors.UrlBasedCorsConfigurationSource;
importiere org.springframework.web.filter.CorsFilter;
importiere org.springframework.web.servlet.config.annotation.*;


/**
 */
@Konfiguration
öffentliche Klasse MyWebConfigurer implementiert WebMvcConfigurer {

@Überschreiben
   public void addCorsMappings(CorsRegistry-Registrierung) {
       registry.addMapping("/**") // Pfade, die domänenübergreifenden Zugriff erlauben.allowCredentials(true) // Gibt an, ob Cookies gesendet werden sollen
               .allowedOriginPatterns("*") // Für domänenübergreifenden Zugriff zulässige Ursprünge.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") // Erlaubte Anforderungsmethoden.allowedHeaders("*") // Erlaubte Header-Einstellungen.maxAge(168000); // Vorabprüfungsintervall}  
}

Wenn Ihr Spring Boot-Backend in Shiro integriert ist, wird die obige Konfiguration auf Shiros Anforderung nicht wirksam und der Browser fordert weiterhin domänenübergreifenden Zugriff an. Daher verwenden wir die folgende Methode, um den domänenübergreifenden Zugriff einzurichten

importiere org.springframework.boot.SpringBootConfiguration;
importiere org.springframework.boot.web.servlet.FilterRegistrationBean;
importiere org.springframework.context.annotation.Bean;
importiere org.springframework.context.annotation.Configuration;
importiere org.springframework.web.cors.CorsConfiguration;
importiere org.springframework.web.cors.UrlBasedCorsConfigurationSource;
importiere org.springframework.web.filter.CorsFilter;
importiere org.springframework.web.servlet.config.annotation.*;


/**

  */
@Konfiguration
öffentliche Klasse MyWebConfigurer implementiert WebMvcConfigurer {
    @Bohne
    öffentliche FilterRegistrationBean corsFilter() {
        endgültige UrlBasedCorsConfigurationSource-Quelle = neue UrlBasedCorsConfigurationSource();
        endgültige CorsConfiguration-Konfiguration = neue CorsConfiguration();
        // Erlaube das Senden von Cookies über Domänen hinweg config.setAllowCredentials(true);
        // #Erlaube der URI, Anfragen an den Server zu senden. * bedeutet, dass alles erlaubt ist. Wenn es in SpringMVC auf * gesetzt ist, wird es automatisch in den Ursprung im aktuellen Anfrageheader konvertiert.
        config.addAllowedOriginPattern("*");
        // # Header-Informationen, auf die zugegriffen werden darf, * bedeutet alle config.addAllowedHeader("*");
        // Die Cache-Zeit (in Sekunden) für Vorabprüfungen von Anfragen. Das heißt, während dieser Zeitspanne wird dieselbe domänenübergreifende Anfrage nicht erneut vorab geprüft. config.setMaxAge(18000L);
        // Zum Senden von Anfragen zulässige Methoden, * bedeutet, dass alle zulässig sind config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("LÖSCHEN");
        config.addAllowedMethod("PATCH");
        Quelle.registerCorsConfiguration("/**", Konfiguration);

        FilterRegistrationBean bean = neue FilterRegistrationBean(neuer CorsFilter(Quelle));
        // Listener-Priorität festlegen bean.setOrder(0);

        Bohne zurückgeben;
    }
}

Dies ist das Ende dieses Artikels zur Lösung des domänenübergreifenden Problems von Vue+SpringBoot+Shiro. Weitere relevante domänenübergreifende Inhalte zu Vue SpringBoot Shiro finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Lösen Sie das domänenübergreifende 403-Problem von Vue, das die Springboot-Schnittstelle aufruft
  • vue+springboot implementiert CORS Cross-Domain-Anforderungen des Projekts
  • Trennung von Front-End und Back-End von Vue + Springboot zur Realisierung einer domänenübergreifenden Single-Sign-On-Problemlösung
  • Lösen Sie das Problem der domänenübergreifenden Sitzungs- und Cookie-Ungültigkeitserklärung von Vue + Springboot bei der Trennung von Front-End und Back-End
  • Lösung für das domänenübergreifende Problem der SpringBoot- und Vue-Interaktion

<<:  Detaillierte Analyse des MySQL Master-Slave-Verzögerungsphänomens und -prinzips

>>:  Eine kurze Analyse zum besten Umgang mit vergessenen MySQL 8-Passwörtern

Artikel empfehlen

So verwenden Sie ein Domestic Image Warehouse für Docker

1. Problembeschreibung Aus bestimmten Gründen ist...

Detaillierte Analyse des Linux-Kernel-Makros container_of

1. Wie oben erwähnt Ich habe dieses Makro gesehen...

Benutzerdefiniertes Auswahlfeld für die Webseite Auswählen

Jeder ist wahrscheinlich mit dem Auswahl-Dropdown...

Detaillierte Erläuterung der MySQL-Remoteverbindungsberechtigung

1. Melden Sie sich bei der MySQL-Datenbank an mys...

Jenkins+Gitlab+Nginx Bereitstellung einer Front-End-Anwendung

Inhaltsverzeichnis Zugehörige Abhängigkeitsinstal...

18 Killer-JavaScript-Einzeiler

Vorwort JavaScript erfreut sich weiterhin wachsen...

Implementierung des Element-UI-Layouts (Zeilen- und Spaltenkomponenten)

Inhaltsverzeichnis Grundlegende Anweisungen und V...

MySQL kontrolliert die Anzahl der Versuche, falsche Passwörter einzugeben

1. So überwachen Sie MySQL-Deadlocks in Produktio...

Eine kurze Analyse der Grundkonzepte von HTML-Webseiten

Was ist eine Webseite? Die Seite, die nach dem HT...

Implementierungscode zur Installation von vsftpd in Ubuntu 18.04

Installieren Sie vsftpd $ sudo apt-get installier...

js implementiert dynamisch Operationen zum Hinzufügen und Löschen von Tabellen

In diesem Artikelbeispiel wird der spezifische Co...