Lösen Sie das domänenübergreifende Problem von Get- und Post-Anfragen von vue $http

Vue $http - domänenübergreifendes Abrufen und Senden von Anfragen

Konfigurieren Sie zunächst die Proxy-Tabelle in config/index.js.

 Proxy-Tabelle: {
      '/api':{
          // Ziel: 'http://jsonplaceholder.typicode.com',
          Ziel: 'http://localhost:9080',
          changeOrigin:true,

           PfadUmschreiben:{
               '/api':''
           }
      }

Übermittlung des Anmeldeformulars mit Benutzername und Passwort

Methoden: {
// Anfrage abrufen // submitForm() {
            // var formData = JSON.stringify(this.ruleForm);
            // dies.$http.get('/api/amdatashift/login/probe').dann(function(data){

            // }).catch(Funktion(){
            // console.log("Serverausnahme");
            // });
            // }
  //Anfrage senden submitForm() {
                 var formData = JSON.stringify(this.ruleForm);
                 dies.$http.post('/api/amdatashift/login/user',{

                     Benutzername:this.ruleForm.username,
                     Passwort:this.ruleForm.password
                 },{
                            emulateJSON:true
                        }).dann(Funktion(Daten){
                      konsole.log(Daten); 
                 }).catch(Funktion(){
                     console.log("Serverausnahme");
             });
             }
      }

Beachtenswert:

1. Achten Sie darauf, {emulateJSON: true} festzulegen, sonst schlägt die domänenübergreifende Ausführung fehl.

2. Im Chrome-Browser sehen Sie immer noch http://localhost:8080 (die Adresse, unter der Sie Vue starten, nicht die Adresse Ihrer Serveranwendung). Seien Sie also nicht überrascht, wenn Sie es sehen, denn der domänenübergreifende Zugriff ist erfolgreich.

3. Die HTTP-Anforderung muss /api enthalten. Der Proxy von index.js entfernt /api. Die Zugriffsadresse im Browser lautet http://localhost:8080/api/amdatashift/login/user, und die tatsächliche Zugriffsadresse lautet http://localhost:9080/amdatashift/login/user. Der domänenübergreifende Zugriff wird über einen Proxy erreicht.

Die Upload-Steuerung von Vue el-upload meldet ständig domänenübergreifende Probleme. Aus der Post-Anfrage wird eine Get-Anfrage.

Ich habe kürzlich einen Vue-Upload durchgeführt und dabei die el-upload-Steuerung von elmentui verwendet. Infolgedessen gab es immer einige Probleme. Ich hoffe, dass jeder diese Fallstricke vermeiden kann.

Und nun ohne weitere Umschweife die Codes in den Screenshots.

1. Steuerelemente verschieben und Aktionsadressen ändern

Nach der Konfiguration direkt testen, emmm..... Der Fehler lautet wie folgt:

Es tritt ein domänenübergreifendes Problem auf, was verständlich ist, da ich den Front-End-Dienst entwickle und die Ports für den Back-End-Dienst auf meinem lokalen Computer unterschiedlich sind.

Finden Sie Informationen und Lösungen für die domänenübergreifenden Probleme von Vue und aktivieren Sie dann den Proxy.

Suchen Sie in der Konfiguration des Vue-Projekts nach der Datei „index.js“, öffnen Sie sie und fügen Sie dann die folgenden Informationen hinzu. Beachten Sie, dass changeOrigin wahr ist. Dies bedeutet, dass http://192.158.111.101:8000 durch /api ersetzt wird. Beispiel: Die ursprüngliche Adresse ist „http://localhost:8000/ssmShow/upload“ und die aktuelle Adresse ist „/api/ssmShow/upload“.

Daher wird die Upload-Steuerung wie folgt geändert:

Testen; ähm. . . Wieder falsch

Es wird immer noch ein domänenübergreifender Fehler gemeldet, es werden zweimal Anfragen gestellt und es liegt ein Problem mit der Anfrage vor

Der Dateiupload sollte weiterhin eine Post-Anfrage sein, hier gibt es jedoch eine Get-Anfrage und eine Optionsanfrage. Verwirrt. Der Status 302 ändert sich nicht. Beheben Sie daher zuerst den Fehler 500.

Im Internet gibt es Erklärungen und Verarbeitungsmethoden für Optionsanfragen. Ich habe sie entsprechend geändert (die Methode besteht darin, Filter zu verwenden, um Anfragen abzufangen und zu ändern). Ich habe den Code eingefügt und meiner ist ein Java-Hintergrund.

Fügen Sie einen Filter hinzu.

Gleichzeitig muss web.xml Folgendes hinzufügen

Starten Sie nach der Änderung den Java-Hintergrund neu und testen Sie emmm. . . wie folgt:

Diesmal wird die Schnittstelle dreimal aufgerufen, wow. Das Gute ist jedoch, dass die Optionsanforderung korrekt zurückgegeben wurde. Da die Optionsanforderung korrekt zurückgegeben wurde, wurde die Anforderung zum dritten Mal gestellt.

Ich habe mir die dritte Anfrage genau angesehen, es handelt sich um eine Get-Anfrage. Wie kann das Hochladen eines Anhangs eine Get-Anfrage sein?

Ich habe lange im Internet gesucht und alle sagten, es gäbe ein Problem mit der el-Upload-Steuerung. Die Aktion kann nicht verwendet werden, daher habe ich die Methode im Internet befolgt, um der Aktion eine gefälschte Adresse hinzuzufügen und die Hook-Funktion des Steuerelements vor dem Hochladen direkt zu manipulieren.

Senden Sie die Datei direkt mithilfe der Post-Anfrage von Axios.

Weiter testen

Die dritte Upload-Anforderung ist immer noch eine Get-Anforderung, was ein Problem darstellt. Selbst wenn es ein Problem mit der Aktion in el-upload gibt, wie kann ein direkter Aufruf einer Post-Anforderung direkt zu einer Get-Anforderung werden? Dann habe ich lange gesucht. Ich habe es durch die Erinnerung eines älteren Bruders erfahren.

Wenn in js oder vue ein Fehler auftritt, wird die Post-Anfrage in eine Get-Anfrage umgewandelt. Dann habe ich meinen Fehler gefunden, nämlich meine Adresse.

Bist du nicht wütend? Es ist nur so, dass an dieser Stelle kein Schrägstrich steht. Füge ihn hinzu und teste ihn später.

Alles ist in Ordnung, es gibt nur eine Anfrage und die Datei wurde erfolgreich hochgeladen. Obwohl ich traurig bin, bin ich immer noch sehr glücklich.

Achten Sie auf die Adresse, die ich im Bild markiert habe. Der Port ist 8080 und dort steht das Wort „API“. Dies ist nicht die tatsächliche Adresse meines Backends. Dies ist die Proxy-Adresse. Er kann über den Proxy auf meine tatsächliche Adresse zugreifen. Also, Brüder, denken Sie nicht, dass es falsch ist, nur weil der Port oder der Adresspfad falsch ist. Dies ist richtig.

Das Obige ist meine persönliche Erfahrung. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.