Pourquoi utiliser le proxy inverse de Vue ?

En vue, étant donné que le proxy inverse peut masquer le serveur réel et contourner le cross-domain causé en demandant directement la vraie URL, il est nécessaire d'utiliser un proxy inverse pour éviter les problèmes inter-domaines, le proxy inverse est couramment utilisé dans le domaine ; front-end et back-end Dans le scénario de développement séparé, le front-end doit se connecter à l'interface back-end et envoyer des requêtes de la même source au serveur proxy inverse.

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

Pourquoi utiliser le proxy inverse de vue

Scénarios d'utilisation du proxy inverse

Dans le scénario de développement front-end et back-end séparés, il y a un serveur sur le front-end (fournissant des pages statiques) et un serveur sur le back-end (fournissant des interfaces)

Ceci Lorsque le front-end doit se connecter à l'interface back-end, des problèmes inter-domaines se produiront

Dans l'environnement de publication, s'il y a des problèmes inter-domaines, utilisez nginx

Si les codes front-end et back-end sont sur le même serveur, il n'y aura pas de problèmes inter-domaines

Solution inter-domaines

jsonp (solution front-end)

CORS (solution back-end) : partage de ressources d'origine croisée

proxy inverse (solution front-end)

Qu'est-ce qu'un proxy inverse

Proxy inverse Cacher le serveur réel pour que le navigateur soit toujours de la même origine

Principe du proxy inverse

En forgeant des requêtes pour effectuer des requêtes http à partir de la même origine, puis en envoyant les requêtes de la même origine au serveur proxy inverse, demandez la véritable URL au serveur proxy, contournant ainsi le problème inter-domaines causé par la demande directe de la véritable URL.

Configuration du proxy inverse

Proxy inverse Vue-cli3

Créer une nouvelle vue dans le répertoire racine du projet Fichier .config.js

Code de configuration :

module.exports = {undefined
  lintOnSave:false,
  devServer:{undefined
    proxy: { 
      '/api': { 
             target: 'http://localhost:80',
             changeOrigin: true, 
             pathRewrite: {undefined
                '^/api': ""   
              }，
        '/apidouban': {undefined
             target: 'http://localhost:3001',
             changeOrigin: true, 
             pathRewrite: {undefined
                '^/apidouban': ""
              }
          }
      }
   }
}

Processus d'exécution du proxy inverse :

Conversion de /api dans l'adresse d'accès axios à la cible + /api :

(ex : http:localhost:9000/api/goods conversion Créer un serveur virtuel pour http://localhost:80/api/goods)

                                   en utilisant             en utilisant                en utilisant             '           out out 's         ‐       ‐ ‐ ‐                                                   using using              out out à travers off ' s ' à ‐‐‐‐‐‐ et ​ ​ au Tutoriel

》】

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!