Detaillierte Erklärung, wie Nginx das Problem des domänenübergreifenden Zugriffs auf Front-End-Ressourcen löst

Nachdem ich fast zwei Tage lang mit dem domänenübergreifenden Front-End-Problem gequält wurde, habe ich es schließlich mit ngnx gelöst und werde es hier zusammenfassen.

In diesem Artikel wird nur die Verwendung von Ngnx zur Lösung domänenübergreifender Probleme erläutert, nicht die Prinzipien.

1. Stellen Sie zunächst die relevanten Befehlsvorgänge von Nignx in der Windows-Umgebung vor

Allgemeine Nginx-Befehle:

• Überprüfen Sie, ob die Konfiguration korrekt ist: nginx -t
• Überprüfen Sie die Versionsnummer von Nginx: nginx -V
• Starten Sie Nginx: start nginx
• Nginx schnell stoppen oder herunterfahren: nginx -s stop
• Nginx normal stoppen oder herunterfahren: nginx -s quit
• Befehl zum Neuladen von Änderungen an der Konfigurationsdatei: nginx -s reload

Nach dem Stoppen von nginx wird nginx.pid im Verzeichnis /logs automatisch gelöscht

• Mit dem Befehl nginx -c conf/nginx.conf können Sie nginx neu erstellen oder neu starten.

Überprüfen Sie, ob der Nignx-Listening-Port erfolgreich gestartet wurde

• netstat -ano | findstr Portnummer

Lösung: Der Port hört nach dem Schließen von nignx immer noch zu

1. netstat -ano | findstr Portnummer#PID abrufen

2. Taskliste | findstr "PID" #Befehl zum Suchen von Nginx-Prozessinformationen

3. taskkill /f /t /im nginx.exe #Beenden Sie den Nginx-Prozess

2. Einführung in die Konfiguration von Nignx zur Lösung domänenübergreifender Probleme

Front-End-IP-Portnummer: http://localhost:8080/

Backend-IP-Portnummer: http://localhost:8082/

Wenn wir jetzt kein Cross-Domain-Setup durchführen, lautet die Front-End-Anforderung wie folgt

uni.request({
  URL: „http://localhost:8082/ApiController/test“,
  Erfolg:(res)=>{
  konsole.log(res.daten)
  },
})

Zugriffsadresse: 'http://localhost:8082/ApiController/test', es wird angezeigt

Dann konfigurieren wir Nignx

Bearbeiten Sie diese Datei /config/nginx.conf

1) Fügen Sie Header-Informationen hinzu und fügen Sie die domänenübergreifende Zugriffskonfiguration im http-Block der Konfigurationsdatei nginx.conf hinzu

add_header Access-Control-Allow-Origin *; //Allen Domänennamen den domänenübergreifenden Zugriff auf die Proxy-Adresse erlauben add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET; //Domänenübergreifende Anforderungszugriffsanforderungsmethode,

2) Richten Sie einen Reverse-Proxy ein

Server {
  listen 80; #Abhörport von nignx konfigurieren server_name localhost; #Abhöradresse von nignx konfigurieren location /ApiController{ #Abhöradresse beginnt mit /ApiController proxy_pass http://localhost:8082; #Weiterleitungsadresse}
}

Nach der Konfiguration unsere Front-End-Zugriffs-URL

http://localhost:8082/ApiController/test sollte in http://localhost:80/ApiController/test geändert werden.

#Überwachung zu diesem Zeitpunkt

Verwenden Sie „localhost“ als Domänennamen

Verwenden Sie Port 80

Die Adresse beginnt mit /ApiController

Die Adressweiterleitung erfolgt

uni.request({
   URL: „http://localhost:80/ApiController/test“,
   Erfolg:(res)=>{
   konsole.log(res.daten)
   },
})

Ergebnis: (Zugriff erfolgreich)

Zusammenfassen

Dies ist das Ende dieses Artikels darüber, wie Nginx das Problem des domänenübergreifenden Zugriffs auf Front-End-Ressourcen löst. Weitere relevante Inhalte darüber, wie Nginx das Problem des domänenübergreifenden Zugriffs auf Front-End-Ressourcen löst, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!