Wie Vue-cli ProxyTable domänenübergreifende Probleme in der Entwicklungsumgebung löst

In diesem Artikel wird hauptsächlich die detaillierte Erklärung von Vue-cli ProxyTable zur Lösung domänenübergreifender Probleme in der Entwicklungsumgebung vorgestellt. Freunde, die es benötigen, können darauf zurückgreifen.

Ich habe es immer getan Beim gemeinsamen Debuggen mit dem Backend bin ich auf dieses Problem gestoßen, als ich kürzlich ein Projekt auf Basis von Vue entwickelt habe. Beide Seiten haben über viele Methoden nachgedacht, viele Informationen überprüft und viele Parameter hinzugefügt Am Ende musste ich meinen Localhost dem zuordnen, der verwendet werden soll.

Als ich heute den Code durchgesehen habe, habe ich plötzlich festgestellt, dass es in der Konfigurationsdatei von vue-cli einen Parameter namens „proxyTable“ gibt. Als ich mir diesen Namen ansah, hatte ich das Gefühl, dass er das Problem lösen könnte , also habe ich danach gesucht, und tatsächlich. In vuejs-templates, dem von vue-cli verwendeten Vorlagen-Plug-in, gibt es Anweisungen zum API-Proxy, und dieser Parameter wird verwendet.

https://vuejs-templates.github.io/webpack/proxy.html

Dieser Parameter ist hauptsächlich eine Adresszuordnungstabelle. Sie können komplexe URLs konfigurieren ist vereinfacht. Die Adresse, die wir anfordern möchten, lautet beispielsweise api.xxxxxxxx.com/list/1 und kann wie folgt festgelegt werden:

proxyTable: {
 '/list': {
  target: 'http://api.xxxxxxxx.com',
  pathRewrite: {
   '^/list': '/list'
  }
 }
}

In Auf diese Weise schreiben wir die URL. Wenn wir einfach /list/1 schreiben, um api.xxxxxxxx.com/list/1 darzustellen.

Wie kann man also das domänenübergreifende Problem lösen? Tatsächlich gibt es im obigen Parameter „list“ einen Parameter „changeOrigin“, der einen booleschen Wert erhält. Wenn er auf „true“ gesetzt ist, empfängt ein lokaler virtueller Server Ihre Anfrage und sendet die Anfrage in Ihrem Namen Seien Sie nicht domänenübergreifend. Das Problem ist, dass dies natürlich nur für Entwicklungsumgebungen gilt. Der hinzugefügte Code lautet wie folgt:

proxyTable: {
 '/list': {
  target: 'http://api.xxxxxxxx.com',
  changeOrigin: true,
  pathRewrite: {
   '^/list': '/list'
  }
 }
}

Diese Einstellung von vue-cli stammt von der Plug-in-http-proxy-middleware, die es verwendet

github: https://github.com/chimurai/http-proxy-middleware

Wenn Sie mehr erfahren möchten, können Sie die Plug-in-Konfigurationsanweisungen lesen Unterstützt auch WebSocket, ein sehr leistungsfähiges Plug-In.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über den Vorgang der Übermittlung von Daten für die Front-End- und Back-End-Dateninteraktion von vue.js

So lösen Sie das Vue-Problem, dass der Stift nicht in CLI verwendet werden kann

Das obige ist der detaillierte Inhalt vonWie Vue-cli ProxyTable domänenübergreifende Probleme in der Entwicklungsumgebung löst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!