Heim  >  Artikel  >  Betrieb und Instandhaltung  >  Wie Nginx domänenübergreifende Probleme löst

Wie Nginx domänenübergreifende Probleme löst

(*-*)浩
(*-*)浩Original
2019-07-13 15:15:064167Durchsuche

Trennung von Front-End und Back-End, Verwendung von Nginx zur Lösung domänenübergreifender Probleme

Wie Nginx domänenübergreifende Probleme löst

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn