Nginx解決history模式下頁面刷新404問題示例

Posted on by

前置知識

  • 單頁應用(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問題示例的詳細內容，更多關於Nginx history頁面刷新404的資料請關註WalkonNet其它相關文章！

推薦閱讀：