So verwenden Sie Webpack zur Bearbeitung domänenübergreifender Anfragen

Dieses Mal zeige ich Ihnen, wie Sie Webpack zur Bearbeitung domänenübergreifender Anfragen verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Webpack zur Bearbeitung domänenübergreifender Anfragen gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Beim Front-End-Debugging war domänenübergreifendes Problem immer ein problematisches Problem. Einige mögliche Methoden zur Lösung domänenübergreifender Probleme wurden im vorherigen Artikel besprochen.

Wenn Sie JSONP verwenden möchten, müssen zunächst viele Dinge geändert werden. Wenn Sie CORS verwenden, entspricht dies nicht dem allgemeinen Trend der Front-End-Entwicklung ist kein Anwendungs-/JSON-Typ. Und was noch wichtiger ist: Dies ist nur während des Front-End-Debuggings erforderlich, nicht nachdem es online geschaltet wurde. Daher ist es nicht gut, zu viele Eingriffe in das Back-End zu haben.

Plötzlich schoss mir ein Gedanke durch den Kopf: Würde das Hinzufügen eines Agenten dieses Problem nicht lösen? Aber nachdem ich darüber nachgedacht hatte, war das Schreiben ziemlich mühsam, also habe ich es auf Eis gelegt.

Stone erwähnte bis vor ein paar Tagen, dass webpack-dev-server bereits darüber nachgedacht und es bereits für uns umgesetzt hat.

Also habe ich es in einem Vue-Projekt getestet und festgestellt, dass es nicht nur den lokalen Server im laufenden Betrieb laden kann, sondern auch die Remote-API domänenübergreifend direkt aufrufen kann, was alle Probleme perfekt gelöst hat schon mal begegnet.

Als nächstes werde ich die Schritte kurz vorstellen (am Beispiel eines Webpack-Projekts, das mit Vue-Scaffolding erstellt wurde):

Überprüfen Sie zunächst, ob

proxy: config.dev.proxyTable,

in build/webpack.dev.conf vorhanden ist .js

Wenn dieses Konfigurationselement auskommentiert ist, öffnen Sie bitte den Kommentar. Wenn nicht, fügen Sie es bitte dem devServer-Objekt hinzu

Fügen Sie dann das ProxyTable-Konfigurationselement zum dev-Objekt in config/index.js hinzu :

proxyTable: {
   '/**': {
    target: 'http://api.xxx.com',
    changeOrigin: true,
    secure: false
   }
  },

Der Schlüssel /** davor bedeutet, dass alle Anfragen weitergeleitet werden. Wenn Sie einige Anfragen weiterleiten, können Sie ihn in eine Zeichenfolge wie /api ändern. Das Ziel nach

ist die zu übertragende Website. Wenn der Browser die Back-End-Antwort erhält, geht er davon aus, dass es sich um eine lokale Anfrage handelt Im Backend wird dies als Aufruf innerhalb der Site betrachtet.

Auf diese Weise wird durch diese einfache Konfiguration das domänenübergreifende Problem perfekt gelöst. Nach

können Sie bei direkter Ausführung von

npm run dev

die Ajax-Anfrage im Test-Frontend zum Testen an den Back-End-Server weiterleiten!

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Js verwenden, um die Promise-Bibliothek zu implementieren

So beschneiden Sie Bilder in React

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Webpack zur Bearbeitung domänenübergreifender Anfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!