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-FrontendKonfigurieren 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 KonfigurationProxy-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 KonfigurationSchauen 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 BootWenn 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:
|
<<: Detaillierte Analyse des MySQL Master-Slave-Verzögerungsphänomens und -prinzips
>>: Eine kurze Analyse zum besten Umgang mit vergessenen MySQL 8-Passwörtern
Installieren Sie die entpackte Version der MySql-...
Inhaltsverzeichnis Klassischer Ansatz Frage Weite...
Wir verwenden animierte CSS3-Übergänge, um einen ...
Sie können yum verwenden, um alle Abhängigkeiten ...
Inhaltsverzeichnis Vorwort wissen Übung macht den...
Detaillierte Erklärung zur Fehlplatzierung des Ein...
Linux ist ein offenes System. Im Internet sind vi...
Zum Sortieren ist „order by“ ein Schlüsselwort, d...
In diesem Artikel wird der spezifische Code von j...
Anfänger können HTML lernen, indem sie einige HTM...
Inhaltsverzeichnis Problemübersicht Reproduktion ...
Auf dem heimischen Markt besteht noch immer ein g...
Inhaltsverzeichnis Vorwort analysieren Erste Rend...
Vorwort Beim Erstellen einer Seite stoßen wir häu...