Vite configure le proxy Proxy pour résoudre le domaine croisé

Lorsque nous écrivons des projets front-end, nous rencontrons souvent des problèmes inter-domaines. Lorsque nous accédons au chemin URL de l'API back-end, tant qu'il existe une différence de nom de domaine, de port ou de protocole d'accès (tel que HTTP et HTTPS ), il sera bloqué par le navigateur identifié comme interdomaine. De plus, nous écrirons souvent à plusieurs reprises le nom de domaine du backend, par exemple  https://example.com/api/some_end_point, https://example.com/api/other_end_pointpour ces deux cas, nous pouvons directement utiliser la même configuration pour le résoudre, c'est-à-dire la configuration du proxy. ​

Indépendamment de Vite ou Webpack, ces outils d'empaquetage prennent en charge la configuration de proxys frontaux, qui peuvent convertir directement l'accès à une certaine URL en une autre véritable adresse API back-end, de sorte que le front-end et le back-end sont considérés comme utiliser le même nom de domaine, protocole et port, cela évite le problème du cross-domain, et évite l'écriture fastidieuse et répétée des noms de domaine.

Configurer le proxy Vite

Ici, nous prenons la configuration de Vite comme exemple pour voir comment définir un proxy pour les requêtes API. Dans le projet écrit par Vite, il y a un  vite.config.jsfichier de configuration, qui contient des éléments de configuration sur Vite, et l'agent peut y être configuré. Si le chemin de notre projet frontal est  http://localhost:3000, nous devons envoyer par proxy toutes  /api les demandes d'API commençant par , et les transférer vers  http://localhost:3001, et le chemin de l'API back-end n'a pas  /apide préfixe, et le préfixe doit être automatiquement supprimé  /api, comme indiqué dans le figure suivante :

// vite.config.js

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:3001",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

Puis redémarrez le projet

Résumé

Le problème inter-domaines frontal est en fait un problème de sécurité, qui consiste à empêcher l'accès mutuel entre les services de différents noms de domaine, afin d'empêcher les programmes malveillants d'obtenir illégalement des ressources back-end. Lors du développement, nous pouvons utiliser un proxy pour proxy la demande, et changer le nom de domaine pour le même, évitant ainsi le problème de croisement. Définir un proxy dans Vite consiste  vite.config.jsà configurer  serverles propriétés dans le fichier de configuration et à  proxyy configurer les éléments de configuration. Plusieurs proxys peuvent être configurés pour demander différents chemins de backend en fonction de différents chemins d'API. Dans cet article, un seul est configuré  /apià titre de démonstration.