Wie Nginx domänenübergreifende Probleme löst

Wie verwende ich Nginx, um domänenübergreifende Front-End-Probleme zu lösen?

Vorwort

Bei der Entwicklung statischer Seiten und Anwendungen wie Vue rufen wir häufig einige Schnittstellen auf, diese Schnittstellen sind wahrscheinlich domänenübergreifend und dann Browser Ein Cross-Origin-Problem wird gemeldet und es werden keine Anpassungen vorgenommen.

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, wenn es sich um eine mobile Seite handelt.

Lösung

Verwenden Sie Nginx, um Anfragen weiterzuleiten. Schreiben Sie domänenübergreifende Schnittstellen als Schnittstellen der lokalen Domäne und leiten Sie diese Schnittstellen dann an die tatsächliche Anforderungsadresse weiter.

Zum Beispiel

Zum Beispiel entwickeln wir eine Vue-Anwendung.

Original:

Die Debugging-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: Das löst das Cross-Domain-Problem.

Schritt 2:

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

Schritt 3:

Kommentieren Sie die Standardserverkonfiguration aus.

Unten hinzufügen:

   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;
        }
    }

Starten Sie nach dem Speichern Nginx.

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

Schritt 4:

Besuch: http://192.168.1.100:8888/

Fertig.

PS: Beachten Sie, dass der aufgerufene Port „8888“ ist. Wenn Sie Adressen in anderen Domänen haben, fügen Sie einfach den Standort hinzu.

Fehlerdemonstration

Ich habe die Konfiguration von Nginx zunächst nicht ganz verstanden, daher dachte ich, es könnte wie folgt konfiguriert werden.

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

Der Grund, warum ich das schreibe, ist, dass ich denke, dass Nginx mir dabei helfen wird, 8080-Anfragen zu überwachen und dann nur passende Anfragen weiterzuleiten. Was mir nicht klar war, ist, dass Nginx nach dem Schreiben dieses Artikels Port 8080 belegen muss.

Da der Port belegt sein muss, kann er nicht mehr von anderen Prozessen mit demselben Protokoll belegt werden, was dazu führt, dass die entwickelte Seite auf Port 8080 nicht aktiviert werden kann. Nachdem ein Kollege es erwähnt hatte, erinnerte ich mich an die Angelegenheit, überlegte es mir anders und entwickelte die beste Methode.

Zusammenfassung

Tatsächlich können Sie dies nicht nur während der Entwicklung und beim Debuggen tun, sondern auch in der Produktionsumgebung. Nachdem Nginx zum Weiterleiten der Anforderung verwendet wurde, muss die bereitzustellende statische Seite nicht in derselben Domäne wie die Anforderungsschnittstelle platziert werden.

Anhang

Wenn Sie ein Problem mit der Anfrage finden und feststellen, dass es sich um einen von Nginx gemeldeten Fehler handelt, müssen Sie nur das error.log von Nginx finden Kenne den Grund.

Voraussetzung ist die Konfiguration von error.log in nginx.conf:

error_log  logs/error.log;

Der Speicherort von error.log auf dem Mac:

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

Weitere Informationen zu Nginx finden Sie unter Tutorial zur Nginx-Nutzung Spalte!

Das obige ist der detaillierte Inhalt vonWie Nginx domänenübergreifende Probleme löst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!