Nginx怎么解決history模式下頁面刷新404問題

這篇文章主要介紹“Nginx怎么解決history模式下頁面刷新404問題”，在日常操作中，相信很多人在Nginx怎么解決history模式下頁面刷新404問題問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Nginx怎么解決history模式下頁面刷新404問題”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

前置知識

• 單頁應用(SPA - single page application)
  只在第一次加載頁面時，返回唯一的html頁面和它的公共靜態(tài)資源，后續(xù)的頁面跳轉都不會從服務端拿html文件。（hash和history路由實現(xiàn)瀏覽器url變化而不刷新頁面）

• hash路由
  例子：www.baidu.com/#/home, 原本hash是用來結合錨點實現(xiàn)頁面試圖的控制，當#后面的值發(fā)生改變時不會重新請求頁面，主要通過window的onhashchange方法來實現(xiàn)。

• history路由
  相比于hash路由，最直觀的變化就是路由中沒有#，通過調用window.history對象上的一系列方法來實現(xiàn)頁面的無刷新跳轉（pushState、replaceState）。

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

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

Nginx

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

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

location

語法

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

• =：表示精確匹配

• ~：表示區(qū)分大小寫正則匹配

• ~*：表示不區(qū)分大小寫正則匹配

• ^~：表示 URI 以某個常規(guī)字符串開頭

• !~：表示區(qū)分大小寫正則不匹配

• !~*：表示不區(qū)分大小寫正則不匹配

• /：通用匹配，任何請求都會匹配到

常用匹配規(guī)則

   # 將所有請求直接轉發(fā)給服務器的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/開始的請求轉發(fā)給Account服務器
    location /account/ {
        proxy_pass http://127.0.0.1:8080/
    }
    # 將/order/開始的請求轉發(fā)給Order服務器
    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
處理結果：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/; 
   }

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

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

到此，關于“Nginx怎么解決history模式下頁面刷新404問題”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>