Heim > Artikel > Betrieb und Instandhaltung > Wie Nginx domänenübergreifende Probleme löst
Trennung von Front-End und Back-End, Verwendung von Nginx zur Lösung domänenübergreifender Probleme
Front-End: vue.js+nodejs +webpack
Backend: SpringBoot
Reverse-Proxy-Server: Nginx
Idee: Packen Sie den Front-End-Code, lassen Sie Nginx auf statische Ressourcen verweisen und Nginx leitet weiter Hintergrundanfragen.
1. Packen Sie den Front-End-Code:
npm run build
generiert einen dist-Ordner. Enthält eine index.html-Datei und einen statischen Ordner. Nehmen Sie als Beispiel meinen lokalen Pfad:
/Users/xxx/ideaProjects/webtest/dist
2 nginx.conf im Verzeichnis /usr/local/etc/nginx, fügen Sie dem Server Folgendes hinzu:
listen 80; #原为8080,避免冲突,更改为80 server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root /Users/xxx/ideaProjects/webtest/dist; index index.html; # 此处用于处理 Vue、Angular、React 使用H5 的 History时 重写的问题 if (!-e $request_filename) { rewrite ^(.*) /index.html last; break; } } # 代理服务端接口 location /api/ { proxy_pass http://localhost:8080/;# 代理接口地址 }Test
Das Frontend sendet eine Anfrage: http ://localhost /test, vue-router leitet es zu http://localhost/api/demo/1 um und der tatsächliche Zugriff ist http://localhost:8080/demo/1.
Senden Sie eine Anfrage direkt an den Hintergrund: Besuchen Sie http://localhost/api/demo/1, der tatsächliche Besuch ist: http://localhost:8080/demo/1
Mehr Nginx-bezogene technische Artikel finden Sie in der Spalte
Nginx-TutorialDas 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!