Wie löst Nginx das 404-Problem der Seitenaktualisierung im Verlaufsmodus?

Vorkenntnisse

• Einzelseitenanwendung (SPA - Einzelseitenanwendung)
  Nur wenn die Seite zum ersten Mal geladen wird, werden nur die HTML-Seite und ihre öffentlichen statischen Ressourcen sowie nachfolgende Seitensprünge zurückgegeben Die HTML-Datei wird nicht vom Server abgerufen. (Hash- und History-Routing implementieren Browser-URL-Änderungen, ohne die Seite zu aktualisieren) Wenn sich die nachfolgenden Werte ändern, wird die Seite nicht erneut angefordert. Dies wird hauptsächlich durch die Onhashchange-Methode des Fensters erreicht.

• History-Routing
  Im Vergleich zum Hash-Routing besteht die intuitivste Änderung darin, dass das Routing kein # enthält. Durch Aufrufen einer Reihe von Methoden für das window.history-Objekt kann die Seite ohne Aktualisierung umgeleitet werden (pushState, replaceState). ).

• Da sich im Verlaufsmodus die URL geändert hat und Sie die Seite zu diesem Zeitpunkt manuell aktualisieren, denkt der Browser, dass er eine neue Seite anfordert (initiiert eine neue HTTP-Anfrage), und die neue Seite existiert nicht (die Backend ist nicht konfiguriert) ), was zu 404 führt.
  

  Beschreiben wir zunächst kurz, was nach der Eingabe der IP-Adresse oder des Domänennamens im Browser passiert (es fühlt sich ein bisschen wie eine Interviewfrage an????) Nach dem Drücken der Eingabetaste fordert der Browser den HTML-Code an Nach einer Reihe von Weiterleitungs- und Adressierungsauflösungen wird sie von Port 80 (Standard) auf dem Server empfangen, auf dem sich die Ziel-IP befindet. Zu diesem Zeitpunkt tritt das Problem auf, nachdem die 80-Schnittstelle des Servers die HTTP-Anfrage empfangen hat. Es weiß nicht, was zurückgegeben werden soll. Zu diesem Zeitpunkt benötigen Sie
Nginx, um einen statischen Ressourcen-Proxy auszuführen und dem Server mitzuteilen, welche statischen Dateien zurückgegeben werden sollen.

Nginx

Für die allgemeine Projektbereitstellung müssen wir die nginx.conf-Konfiguration verarbeiten Datei Was Sie über diese Datei wissen müssen, ist Folgendes:

   ....
   # http 是指令块，针对http网络传输的一些指令配置
   http {
       #文件扩展名与文件类型映射表 
       include mime.types;
       #设置客户端与服务端请求的超时时间
       keepalive_timeout  65;
       # 开启压缩功能，目的：提高传输效率，节省带宽 
       gzip on
       server {
          #监听端口
          listen   80;
          #服务命名，最好就是用这个服务器的域名命名
          server_name localhost;
          #指令块，配置外部访问资源和实际资源的对应关系
          location /{
              root /usr/blog; #表示静态资源所在的目录
              index  index.html index.htm; #访问这个路径对应的默认静态资源文件或者网页
          }
       }
   }

   location [=|~|~*|^~|@] uri { ... } 
   location @name { ... }

=: Zeigt eine genaue Übereinstimmung an

~: Zeigt eine reguläre Übereinstimmung an, bei der die Groß-/Kleinschreibung beachtet wird
~* : Zeigt eine reguläre Übereinstimmung ohne Berücksichtigung der Groß- und Kleinschreibung an
^~: Zeigt an, dass der URI mit einer bestimmten regulären Zeichenfolge beginnt mit
!~: Zeigt eine Nichtübereinstimmung mit regulären Ausdrücken ohne Berücksichtigung der Groß-/Kleinschreibung an
!~*: Zeigt an Nichtübereinstimmung regulärer Ausdrücke ohne Beachtung der Groß- und Kleinschreibung
/: Universelle Übereinstimmung, jede Anfrage wird abgeglichen
Gemeinsame Übereinstimmungsregeln

•    # 将所有请求直接转发给服务器的9090端口
      location = / {
        proxy_pass http://127.0.0.1:9090/;
      }
      # 目录匹配 
      location ^~ /static/ { 
          root /webroot/static/;
      } 
      # 后缀匹配 
      location ~* \.(gif|jpg|jpeg|png|css|js|ico)$ { 
          root /webroot/res/; 
      }
      # 将/account/开始的请求转发给Account服务器
      location /account/ {
          proxy_pass http://127.0.0.1:8080/
      }
      # 将/order/开始的请求转发给Order服务器
      location /order/ {
          proxy_pass http://127.0.0.1:9090/
      }

  Nach dem Login kopieren

  root und alias

Der Unterschied zwischen ihnen besteht darin, wie Nginx die URL nach dem Standort interpretiert

Syntax: Root-Pfad

Konfigurationsabschnitt: http, Server, Standort, wenn

[Alias]
Syntax: Alias-Pfad
Konfigurationsabschnitt: Standort

Verarbeitungsergebnis: Verwenden Sie den Alias-Pfad, um den Standortpfad zu ersetzen

   # 返回/www/root/html/t/a.html的文件
   location ^~ /t/ { 
       root /www/root/html/;
   } 
   # 返回/www/root/html/new_t/a.html的文件 
   # 把location后面配置的路径丢弃掉，把当前匹配到的目录指向到指定的目录。 
   location ^~ /t/ { 
       alias /www/root/html/new_t/; 
   }

Nach dem Login kopieren

Lösen Sie das Problem von 404 nach der Aktualisierung

Aus den oben genannten Erkenntnissen können wir wissen, dass der Browser nach der Aktualisierung die HTML-Datei gemäß der aktuellen URL anfordert. Aber SPA hat nur eine HTML-Datei, daher müssen Sie eine Codezeile am entsprechenden Speicherort von nginx.conf konfigurieren.
Teilen Sie Nginx mit, ob die Dateien der Reihe nach überprüft werden. Ob sie vorhanden sind. Wenn nicht, leiten Sie zur Datei index.html weiter.

Das obige ist der detaillierte Inhalt vonWie löst Nginx das 404-Problem der Seitenaktualisierung im Verlaufsmodus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!