Prinzip der Proxy-Anfrage von vue-cli

Vue ist ein beliebtes JavaScript-Framework, mit dem interaktive Webanwendungen erstellt werden können. Während des Entwicklungsprozesses verwenden wir normalerweise vue-cli, um ein grundlegendes Vue-Projekt zu initialisieren. vue-cli ist ein offiziell von Vue bereitgestelltes Gerüsttool. Es bietet viele praktische Funktionen wie Projektinitialisierung, Verpackung, Veröffentlichung usw.

Während des Entwicklungsprozesses kann es jedoch zu einem Problem kommen: domänenübergreifende Anfragen. Aufgrund der Same-Origin-Richtlinie des Browsers können wir beim Senden einer Anfrage an das Front-End-Ajax nur Serverressourcen unter demselben Domänennamen anfordern, nicht jedoch Serverressourcen in anderen Domänennamen. Zu diesem Zeitpunkt können wir dieses Problem durch Proxy-Anfragen in vue-cli lösen.

Wie wird also die Proxy-Anfrage in vue-cli implementiert?

Der Unterschied zwischen direkten Anfragen und Proxy-Anfragen

Bevor wir das Prinzip von Proxy-Anfragen verstehen, müssen wir den Unterschied zwischen direkten Anfragen und Proxy-Anfragen verstehen. Wenn wir während des Entwicklungsprozesses direkt über Ajax-Anfragen auf den Backend-Dienst zugreifen, wird die Anfrage direkt vom Front-End an das Backend gesendet, wie in der folgenden Abbildung dargestellt:

Diese Methode führt zu domänenübergreifenden Problemen . Wenn die Back-End-Schnittstelle keinen domänenübergreifenden Antwortheader festlegt, verhindert der Browser, dass das Front-End AJAX-Anfragen initiiert, was dazu führt, dass die Anfrage fehlschlägt.

In vue-cli werden wir dieses Problem durch Proxy-Anfragen lösen. Die Grundidee beim Proxying von Anfragen besteht darin, die Anfrage an den lokalen Server zu senden, der die Anfrage dann an den Backend-Server weiterleitet.

Proxy-Konfiguration in vue.config.js

Im vue-cli-Projekt können wir Proxy-Anfragen einrichten, indem wir die Datei vue.config.js konfigurieren. In dieser Datei können wir die Option devServer festlegen und den Proxy konfigurieren, indem wir das Objekt proxy festlegen. Das Folgende ist ein einfaches Beispiel: devServer 选项，通过设置 proxy 对象进行代理配置。下面是一个简单的例子：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

在上述代理配置中，我们将 /api 路径下的请求都转发到本地的 http://localhost:8080 地址。

其中， changeOrigin 选项用于控制是否需要更改请求头中原始主机名。

proxy 对象中，我们可以设置多个代理地址，例如：

module.exports = {
  devServer: {
    proxy: {
      '/api1': {
        target: 'http://localhost:8081',
        changeOrigin: true
      },
      '/api2': {
        target: 'http://localhost:8082',
        changeOrigin: true
      }
    }
  }
}

这里的 /api1 和 /api2 分别代表要转发的请求路径， target 属性指定了要转发到的服务器地址。

实现原理

在了解了代理请求的配置后，我们来看一下代理请求的实现原理。

首先，当我们在前端发起请求时，请求会先被发送到本地服务器。本地服务器接收到请求后，会对请求进行一系列处理，包括修改请求头、修改请求路径等。然后，将处理过的请求转发至后端服务器上。

流程图如下：

需要注意的是，在本地服务器中，我们需要设置代理中间件，例如 http-proxy-middlewarerrreee

In der obigen Proxy-Konfiguration leiten wir alle Anfragen unter dem Pfad /api an die lokale Adresse http://localhost:8080 weiter .

Unter anderem wird die Option changeOrigin verwendet, um zu steuern, ob der ursprüngliche Hostname im Anforderungsheader geändert werden muss.

Im Proxy-Objekt können wir mehrere Proxy-Adressen festlegen, zum Beispiel: 🎜rrreee🎜Hier stellen /api1 und /api2 jeweils den weiterzuleitenden Anforderungspfad dar, target gibt die Serveradresse an, an die weitergeleitet werden soll. 🎜🎜Implementierungsprinzip🎜🎜Nachdem wir die Konfiguration von Proxy-Anfragen verstanden haben, werfen wir einen Blick auf die Implementierungsprinzipien von Proxy-Anfragen. 🎜🎜Wenn wir zunächst eine Anfrage im Frontend initiieren, wird die Anfrage zunächst an den lokalen Server gesendet. Nachdem der lokale Server die Anforderung empfangen hat, führt er eine Reihe von Verarbeitungsvorgängen für die Anforderung durch, einschließlich der Änderung des Anforderungsheaders, der Änderung des Anforderungspfads usw. Die verarbeitete Anfrage wird dann an den Backend-Server weitergeleitet. 🎜🎜Das Flussdiagramm sieht wie folgt aus: 🎜🎜🎜🎜Es ist zu beachten, dass wir auf dem lokalen Server Proxy-Middleware einrichten müssen, z. B. http-proxy-middleware. Proxy-Middleware ist ein Abfangjäger ähnlich einer Antwortanfrage, der zur Steuerung des Anfrageprozesses und zur Änderung des Anfrageinhalts verwendet wird. Wir können die Proxy-Weiterleitung von Anfragen implementieren, indem wir Proxy-Middleware konfigurieren. 🎜🎜Zusammenfassung🎜🎜Durch die obige Einführung verstehen wir das Prinzip der Proxy-Anfrage in vue-cli. Die Proxy-Anfrage ist eine Methode zur Lösung domänenübergreifender Probleme am Front-End. Sie leitet die Anfrage an den lokalen Server weiter, und der lokale Server leitet die Anfrage dann an den Back-End-Server weiter, um den Effekt einer domänenübergreifenden Anfrage zu erzielen. In vue-cli können wir Proxy-Anfragen einrichten, indem wir die Datei vue.config.js konfigurieren, um domänenübergreifende Anfragen am Front-End zu erreichen. 🎜

Das obige ist der detaillierte Inhalt vonPrinzip der Proxy-Anfrage von vue-cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!