Nginx怎麼解決history模式下頁面重新整理404問題

前置知識

• 單頁應用程式(SPA - single page application)
  只在第一次載入頁面時，返回唯一的html頁面和它的公共靜態資源，後續的頁面跳轉都不會從服務端拿html檔。 （hash與history路由實作瀏覽器url變化而不刷新頁面）

• hash路由
  範例：www.baidu.com/#/home, 原本hash是用來結合錨點實現頁面試圖的控制，當#後面的值改變時不會重新請求頁面，主要透過window的onhashchange方法來實現。

• history路由
  相比於hash路由，最直觀的變化就是路由中沒有#，透過呼叫window.history物件上的一系列方法來實現頁面的無刷新跳轉（pushState、replaceState）。

history模式下，因為url改變了，此時如果手動刷新頁面，瀏覽器認為是請求一個新的頁面（發起新的Http請求），而新的頁面是不存在的（後端未配置的話），導致404。

先簡述一下在瀏覽器上輸入IP或網域後發生的事情（有點面試題的味道了嗷????），按下回車之後，瀏覽器發出的http去請求html文件，在透過一系列的轉送和尋址解析後，被目標IP所在伺服器上的80埠（預設）接收，這個時候，問題來了哈，伺服器的80介面拿到Http請求後，它不知道要去回傳什麼，這個時候就需要Nginx進行靜態資源代理，告訴伺服器回傳什麼靜態檔

Nginx

對於一般的專案部署，我們需要處理nginx. conf設定檔
該文件，需要知道的如下

   ....
   # 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

#語法

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

• ##=：表示精確匹配

• #~：表示區分大小寫正規符合

• ~*：表示不區分大小寫正規符合

• ^~：表示URI 以某個常規字串開頭

• !~：表示區分大小寫正規不符合

##!~*：表示不區分大小寫正則不匹配
/：通用匹配，任何請求都會匹配到
常用匹配規則​​

   # 将所有请求直接转发给服务器的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/
    }

root 與alias

兩者差別在於nginx 如何解釋location 後面的url

[root]

語法：root path

預設值：root html
設定段：http、server、location、if
處理結果：root 路徑＋ location 路徑

[alias]

語法：alias path

設定段：location
處理結果：使用alias 路徑替換location 路徑

   # 返回/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/; 
   }

解決刷新後出現404的問題

由上面的知識可以知道，刷新後，瀏覽器根據目前的url去請求html文件，但是SPA只有一個html文件，所以需要在nginx.conf的對應location裡配置一行代碼

try_files $uri $uri/ /index.html;

告訴nginx如果按順序檢查檔案是否存在，若不存在則重定向到index.html檔案

以上是Nginx怎麼解決history模式下頁面重新整理404問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！