Nginx' praktische Methode zur Lösung domänenübergreifender Probleme

Trennen Sie Front- und Backend und lösen Sie domänenübergreifende Probleme mit Nginx

Frontend: vue.js+nodejs+webpack

Hinter den Kulissen: SpringBoot

Reverse-Proxy-Server: nginx

Idee: Verpacken Sie den Front-End-Code, lassen Sie nginx auf statische Ressourcen verweisen und nginx leitet die Hintergrundanforderungen weiter.

1. Verpacken Sie den Front-End-Code:

npm-Ausführung erstellen

Es wird ein „Dist“-Ordner generiert. Enthält eine index.html-Datei und einen statischen Ordner. Der Pfad basiert beispielsweise auf meinem lokalen Standort:

/Benutzer/xxx/ideaProjects/webtest/dist

2. Öffnen

Fügen Sie in der Datei nginx.conf im Verzeichnis /usr/local/etc/nginx Folgendes zum Server hinzu:

listen 80; #Original 8080, um Konflikte zu vermeiden, ändern Sie auf 80

  Servername localhost;

 

  #Zeichensatz koi8-r;

 

  #access_log Protokolle/Host.access.log Haupt;

 

 

  Standort / {

   root /Benutzer/xxx/ideaProjects/webtest/dist;

   Index Index.html;

    

   # Dies wird verwendet, um das Umschreibeproblem zu behandeln, wenn Vue, Angular und React den Verlauf von H5 verwenden, wenn (!-e $request_filename) {

    schreibe ^(.*) /index.html zuletzt um;

    brechen;

   }

  }

 

 

  #Speicherort der Proxyserver-Schnittstelle /api/ {

   proxy_pass http://localhost:8080/;# Proxy-Schnittstellenadresse}

prüfen

Das Front-End sendet eine Anfrage: http://localhost/test, vue-router leitet sie an http://localhost/api/demo/1 weiter und der tatsächliche Zugriff ist http://localhost:8080/demo/1.

Senden Sie eine Anfrage direkt an das Backend: Besuchen Sie http://localhost/api/demo/1, der tatsächliche Zugriff ist: http://localhost:8080/demo/1

Gedanken zur Inhaltserweiterung:

1).
# Proxy-Server-Schnittstelle

Standort /api/ {
proxy_pass http://localhost:8080/;# Proxy-Schnittstellenadresse}

Die Proxy-Schnittstellenadresse erreicht nur 8080, wird also automatisch der Name des Hintergrundprojekts hinzugefügt? ? ? Die Schnittstelle lautet beispielsweise http://148.70.110.87:8080/Projektname/Methodenname. . .

2). Die Anfrage wird in .js gestellt. Nginx ist wie oben konfiguriert, aber die Anfrage schlägt mit http://148.70.110.87/api/index2 404 (Nicht gefunden) fehl.

axios.post('/api/index2')
.then( (Antwort) => {
console.log(Antwort);
})
.catch( (Fehler)=> {
konsole.log(Fehler);
});

3). Ich verstehe Ihren dritten Schritt, das Testen, wirklich nicht. Es wäre toll, wenn Sie entsprechenden Code bereitstellen könnten.