principe de demande de proxy vue-cli

Vue est un framework JavaScript populaire qui peut être utilisé pour créer des applications Web interactives. Pendant le processus de développement, nous utilisons généralement vue-cli pour initialiser un projet Vue de base. vue-cli est un outil d'échafaudage officiellement fourni par Vue. Il fournit de nombreuses fonctions pratiques, telles que l'initialisation du projet, l'empaquetage, la publication, etc.

Cependant, nous pouvons rencontrer un problème lors du processus de développement : les requêtes cross-domaines. En raison de la politique de même origine du navigateur, lorsque nous envoyons une requête sur le front-end Ajax, nous ne pouvons demander que des ressources de serveur sous le même nom de domaine, mais pas de ressources de serveur dans d'autres noms de domaine. Pour le moment, nous pouvons résoudre ce problème via des requêtes proxy dans vue-cli.

Alors, comment la requête proxy dans vue-cli est-elle implémentée ?

La différence entre les demandes directes et les demandes de proxy

Avant de comprendre le principe des demandes de proxy, nous devons comprendre la différence entre les demandes directes et les demandes de proxy. Lorsque nous accédons au service backend directement via des requêtes Ajax pendant le processus de développement, la requête sera envoyée directement du front-end au back-end, comme le montre la figure suivante :

# 🎜🎜#

Cette démarche impliquera des problématiques cross-domaines. Si l'interface back-end ne définit pas d'en-tête de réponse inter-domaines, le navigateur interdira au front-end d'initier des requêtes AJAX, provoquant l'échec de la requête.

Dans vue-cli, nous allons résoudre ce problème grâce à des requêtes proxy. L'idée de base des requêtes proxy est d'envoyer la requête au serveur local, qui la transmet ensuite au serveur backend.

Configuration du proxy dans vue.config.js

Dans le projet vue-cli, nous pouvons configurer vue config. js pour configurer les requêtes proxy. Dans ce fichier, nous pouvons définir l'option devServer et configurer le proxy en définissant l'objet proxy. Ce qui suit est un exemple simple :

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

devServer 选项，通过设置 proxy 对象进行代理配置。下面是一个简单的例子：

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

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

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

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

rrreee

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

实现原理

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

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

流程图如下：

需要注意的是，在本地服务器中，我们需要设置代理中间件，例如 http-proxy-middlewareDans la configuration de proxy ci-dessus, nous transmettons toutes les requêtes sous le chemin /api vers le http://localhost local : Adresse 8080.

Parmi elles, l'option changeOrigin est utilisée pour contrôler si le nom d'hôte d'origine dans l'en-tête de la requête doit être modifié.

Dans l'objet proxy, nous pouvons définir plusieurs adresses proxy, par exemple :

rrreee#🎜🎜#Ici /api1 et /api2 code> représente respectivement le chemin de la requête à transmettre, et l'attribut <code>target spécifie l'adresse du serveur vers lequel transmettre. #🎜🎜##🎜🎜#Principe de mise en œuvre#🎜🎜##🎜🎜#Après avoir compris la configuration de la demande de proxy, jetons un œil au principe de mise en œuvre de la demande de proxy. #🎜🎜##🎜🎜#Tout d'abord, lorsque nous lançons une requête sur le front-end, la requête sera d'abord envoyée au serveur local. Une fois que le serveur local a reçu la requête, il effectuera une série de traitements sur la requête, notamment la modification de l'en-tête de la requête, la modification du chemin de la requête, etc. La requête traitée est ensuite transmise au serveur backend. #🎜🎜##🎜🎜#L'organigramme est le suivant : #🎜🎜##🎜🎜##🎜🎜##🎜🎜#Il est à noter que sur le serveur local, nous devons configurer un middleware proxy , tel que http-proxy-middleware. Le middleware proxy est un intercepteur similaire à une demande de réponse, utilisé pour contrôler le processus de demande et modifier le contenu de la demande. Nous pouvons implémenter le transfert de requêtes par proxy en configurant un middleware proxy. #🎜🎜##🎜🎜#Résumé#🎜🎜##🎜🎜#A travers l'introduction ci-dessus, nous comprenons le principe de la demande de proxy dans vue-cli. La requête proxy est une méthode permettant de résoudre les problèmes inter-domaines sur le front-end. En transmettant la requête au serveur local, puis le serveur local transmet la requête au serveur back-end, l'effet d'une requête inter-domaine est obtenu. Dans vue-cli, nous pouvons configurer des requêtes proxy en configurant le fichier vue.config.js pour implémenter des requêtes inter-domaines sur le front-end. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!