Comment nginx résout les problèmes inter-domaines

Comment utiliser Nginx pour résoudre des problèmes cross-domain front-end ?

Préface

Lors du développement de pages statiques, d'applications comme Vue, nous appelons souvent certaines interfaces, ces interfaces sont susceptibles d'être inter-domaines, puis le navigateur Un problème d'origine croisée sera signalé et aucun ajustement ne sera effectué.

La solution la plus simple consiste à configurer le navigateur pour qu'il ignore les problèmes de sécurité et à définir --disable-web-security. Cependant, cette méthode convient au développement de pages PC, mais elle ne fonctionnera pas s'il s'agit d'une page mobile.

Solution

Utilisez Nginx pour transmettre la demande. Écrivez des interfaces inter-domaines en tant qu'interfaces du domaine local, puis transférez ces interfaces à l'adresse réelle de la demande.

Par exemple,

Par exemple, nous développons une application Vue.

Original :

La page de débogage est : http://192.168.1.100:8080/

L'interface demandée est : http:// ni .hao.sao/api/get/info

Étape 1 :

L'interface demandée est : http://192.168.1.100:8080/api/get /info

PS : Cela résout le problème inter-domaines.

Étape 2 :

Après avoir installé Nginx, allez dans le répertoire /usr/local/etc/nginx/ (c'est pour Mac) et modifiez le nginx.conf déposer .

Étape 3 :

Commentez la configuration du serveur par défaut.

Ajoutez ci-dessous :

   server{
        listen 8888;
        server_name  192.168.1.100;
 
        location /{
            proxy_pass http://192.168.1.100:8080;
        }
 
        location /api{
            proxy_pass http://ni.hao.sao/api;
        }
    }

Après avoir enregistré, démarrez Nginx.

PS : Vous n’avez pas besoin de connaître grand chose sur la configuration de Nginx, c’est très simple.

Étape 4 :

Visite : http://192.168.1.100:8888/

Terminé.

PS : Notez que le port accédé est « 8888 ». Si vous avez des adresses dans d'autres domaines, continuez simplement à ajouter un emplacement.

Démonstration d'erreur

Je n'ai pas bien compris la configuration de Nginx au début, j'ai donc pensé qu'il pouvait être configuré comme suit.

    server{
        listen 8080;
        server_name  192.168.1.100;
 
        location /api{
            proxy_pass http://ni.hao.sao/api;
        }
    }

La raison pour laquelle j'écris ceci est que je pense que cela permettra à Nginx de m'aider à surveiller les requêtes 8080, puis de transmettre uniquement les requêtes correspondantes. Ce que je n'avais pas réalisé, c'est que Nginx devait occuper le port 8080 après avoir écrit ceci.

Le port devant être occupé, il ne peut plus être occupé par d'autres processus avec le même protocole, ce qui fait que la page développée ne peut pas être activée sur le port 8080. Après qu'un collègue l'ait mentionné, je me suis souvenu de ce problème, j'ai changé ma façon de penser et j'ai proposé la meilleure méthode.

Résumé

En fait, vous pouvez le faire non seulement pendant le développement et le débogage, mais également dans l'environnement de production. Après avoir utilisé Nginx pour transmettre la requête, la page statique à déployer n'a pas besoin d'être placée dans le même domaine que l'interface de requête.

Annexe

Si vous trouvez un problème avec la requête et constatez qu'il s'agit d'une erreur signalée par Nginx, il vous suffit de trouver le error.log de Nginx pour connaître la raison.

La condition préalable est de configurer error.log dans nginx.conf :

error_log  logs/error.log;

L'emplacement de error.log sur Mac :

/usr/local/Cellar/nginx/1.15.8/logs/error.log

Pour plus de connaissances sur Nginx, veuillez visiter Tutoriel d'utilisation de Nginx colonne !

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!