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-Tutorial

, um mehr zu erfahren!

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!