So verwenden Sie Nginx, um domänenübergreifende Front-End-Probleme zu lösen

Vorwort

Bei der Entwicklung statischer Seiten, wie etwa Vue-Anwendungen, rufen wir häufig einige Schnittstellen auf, die wahrscheinlich domänenübergreifend sind. Anschließend meldet der Browser ein Cross-Origin-Problem und verweigert den Aufruf.

Die einfachste Lösung besteht darin, den Browser so einzustellen, dass Sicherheitsprobleme ignoriert werden und --disable-web-security festzulegen. Diese Methode eignet sich zwar gut für die Entwicklung von PC-Seiten, funktioniert jedoch nicht für mobile Seiten.

Lösung

Verwenden Sie Nginx, um Anfragen weiterzuleiten. Schreiben Sie die domänenübergreifende Schnittstelle, um die lokale Domänenschnittstelle aufzurufen, und leiten Sie diese Schnittstellen dann an die tatsächliche Anforderungsadresse weiter.

Zum Beispiel

Beispielsweise entwickeln wir eine Vue-Anwendung.

Original:

Die Debug-Seite ist: http://192.168.1.100:8080/

Die angeforderte Schnittstelle ist: http://ni.hao.sao/api/get/info

Schritt 1:

Die angeforderte Schnittstelle ist: http://192.168.1.100:8080/api/get/info

PS: Dies löst das domänenübergreifende Problem.

Schritt 2:

Gehen Sie nach der Installation von Nginx zum Verzeichnis /usr/local/etc/nginx/ (dies ist für Mac) und ändern Sie die Datei nginx.conf.

Schritt 3:

Kommentieren Sie die Standardserverkonfiguration aus.

Fügen Sie unten hinzu:

  Server{
    hören Sie 8888;
    Servername 192.168.1.100;
 
    Standort /{
      Proxy-Passwort http://192.168.1.100:8080;
    }
 
    Standort /api{
      Proxy-Passwort http://ni.hao.sao/api;
    }
  }

Nach dem Speichern starten Sie Nginx.

PS: Sie müssen nicht viel über die Nginx-Konfiguration wissen, es ist ganz einfach.

Schritt 4:

Besuchen Sie: http://192.168.1.100:8888/

Erledigt.

PS: Beachten Sie, dass der Zugriffsport „8888“ ist. Wenn Sie Adressen in anderen Domänen haben, fügen Sie einfach weiterhin Standorte hinzu.

Fehlerdemonstration

Ich habe die Nginx-Konfiguration zunächst nicht ganz verstanden und dachte, ich könnte sie wie folgt konfigurieren.

  Server{
    hören Sie 8080;
    Servername 192.168.1.100;
 
    Standort /api{
      Proxy-Passwort http://ni.hao.sao/api;
    }
  }

Der Grund, warum ich das geschrieben habe, ist, dass ich dachte, dadurch könnte Nginx mir dabei helfen, auf Anfragen auf 8080 zu lauschen und dann nur passende Anfragen weiterzuleiten. Was mir nicht klar war ist, dass Nginx, nachdem es auf diese Weise geschrieben wurde, Port 8080 belegen müsste.

Da der Port belegt sein muss, kann er nicht von anderen Prozessen desselben Protokolls belegt werden, was dazu führt, dass die entwickelte Seite mit Port 8080 nicht aktiviert werden kann. Erst als mich ein Kollege darauf aufmerksam machte, fiel mir die Sache wieder ein. Ich änderte meine Meinung und kam auf die obige Methode.

Zusammenfassen

Tatsächlich kann dies nicht nur während der Entwicklung und Fehlerbehebung, sondern auch in einer Produktionsumgebung erfolgen. Nachdem Sie Nginx zum Weiterleiten von Anforderungen verwendet haben, müssen die bereitzustellenden statischen Seiten nicht in derselben Domäne wie die Anforderungsschnittstelle platziert werden.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.