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

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!