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

js behandelt die Kontoabmeldung beim Schließen des Browsers

Inhaltsverzeichnis Klassischer Ansatz Frage Weite...

CSS3-Bézierkurven-Beispiel: Erstellen von Link-Hover-Animationseffekten

Wir verwenden animierte CSS3-Übergänge, um einen ...

Eine kurze Diskussion über das Implementierungsprinzip von Webpack4-Plugins

Inhaltsverzeichnis Vorwort wissen Übung macht den...

Lösung für die falsche Ausrichtung des Eingabecursors in Chrome, Firefox und IE

Detaillierte Erklärung zur Fehlplatzierung des Ein...

Allgemeiner Leitfaden zur Sicherheitskonfiguration von Linux/CentOS-Servern

Linux ist ein offenes System. Im Internet sind vi...

MySQL versteht kurz, wie "order by" funktioniert

Zum Sortieren ist „order by“ ein Schlüsselwort, d...

jQuery realisiert die volle Funktion des Einkaufswagens

In diesem Artikel wird der spezifische Code von j...

Anfänger lernen einige HTML-Tags (1)

Anfänger können HTML lernen, indem sie einige HTM...

...

Beispiel für die Implementierung einer virtuellen Liste im WeChat Mini-Programm

Inhaltsverzeichnis Vorwort analysieren Erste Rend...