快捷導(dǎo)航

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

更新時間：2022年10月08日 16:12:26 作者：是小福呀

這篇文章主要為大家介紹了Nginx解決history模式下頁面刷新404問題示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前置知識

單頁應(yīng)用(SPA - single page application)
只在第一次加載頁面時，返回唯一的html頁面和它的公共靜態(tài)資源，后續(xù)的頁面跳轉(zhuǎn)都不會從服務(wù)端拿html文件。（hash和history路由實現(xiàn)瀏覽器url變化而不刷新頁面）
hash路由
例子：www.baidu.com/#/home, 原本hash是用來結(jié)合錨點實現(xiàn)頁面試圖的控制，當(dāng)#后面的值發(fā)生改變時不會重新請求頁面，主要通過window的onhashchange方法來實現(xiàn)。
history路由
相比于hash路由，最直觀的變化就是路由中沒有#，通過調(diào)用window.history對象上的一系列方法來實現(xiàn)頁面的無刷新跳轉(zhuǎn)（pushState、replaceState）。

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

先簡述一下在瀏覽器上輸入IP或域名后發(fā)生的事情（有點面試題的味道了嗷??），按下回車之后，瀏覽器發(fā)出的http去請求html文件，在通過一系列的轉(zhuǎn)發(fā)和尋址解析后，被目標(biāo)IP所在服務(wù)器上的80端口（默認）接收，這個時候，問題來了哈，服務(wù)器的80接口拿到Http請求后，它不知道要去返回什么，這個時候就需要Nginx進行靜態(tài)資源代理，告訴服務(wù)器返回什么靜態(tài)文件

Nginx

對于一般的項目部署，我們需要處理nginx.conf配置文件
該文件，需要知道的如下

   ....
   # http 是指令塊，針對http網(wǎng)絡(luò)傳輸?shù)囊恍┲噶钆渲?
   http {
       #文件擴展名與文件類型映射表 
       include mime.types;
       #設(shè)置客戶端與服務(wù)端請求的超時時間
       keepalive_timeout  65;
       # 開啟壓縮功能，目的：提高傳輸效率，節(jié)省帶寬 
       gzip on
       server {
          #監(jiān)聽端口
          listen   80;
          #服務(wù)命名，最好就是用這個服務(wù)器的域名命名
          server_name localhost;
          #指令塊，配置外部訪問資源和實際資源的對應(yīng)關(guān)系
          location /{
              root /usr/blog; #表示靜態(tài)資源所在的目錄
              index  index.html index.htm; #訪問這個路徑對應(yīng)的默認靜態(tài)資源文件或者網(wǎng)頁
          }
       }
   }

location

語法

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

=：表示精確匹配
~：表示區(qū)分大小寫正則匹配
~*：表示不區(qū)分大小寫正則匹配
^~：表示 URI 以某個常規(guī)字符串開頭
!~：表示區(qū)分大小寫正則不匹配
!~*：表示不區(qū)分大小寫正則不匹配
/：通用匹配，任何請求都會匹配到

常用匹配規(guī)則

   # 將所有請求直接轉(zhuǎn)發(fā)給服務(wù)器的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/開始的請求轉(zhuǎn)發(fā)給Account服務(wù)器
    location /account/ {
        proxy_pass http://127.0.0.1:8080/
    }
    # 將/order/開始的請求轉(zhuǎn)發(fā)給Order服務(wù)器
    location /order/ {
        proxy_pass http://127.0.0.1:9090/
    }

root 與 alias

兩者區(qū)別在于 nginx 如何解釋 location 后面的 url

[root]
語法：root path
默認值：root html
配置段：http、server、location、if
處理結(jié)果：root 路徑＋ location 路徑

[alias]
語法：alias path
配置段：location
處理結(jié)果：使用 alias 路徑替換 location 路徑

   # 返回/www/root/html/t/a.html的文件
   location ^~ /t/ { 
       root /www/root/html/;
   } 
   # 返回/www/root/html/new_t/a.html的文件 
   # 把location后面配置的路徑丟棄掉，把當(dāng)前匹配到的目錄指向到指定的目錄。 
   location ^~ /t/ { 
       alias /www/root/html/new_t/; 
   }

解決刷新后出現(xiàn)404的問題

由上面的知識可以知道，刷新后，瀏覽器根據(jù)當(dāng)前的url去請求html文件，但是SPA只有一個html文件，所以需要在nginx.conf的對應(yīng)location里配置一行代碼 try_files $uri $uri/ /index.html; 告訴nginx如果按順序檢查文件是否存在，若不存在則重定向到index.html文件