前置知識

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

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

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

Nginx

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

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

location

語法

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

• =：表示精確匹配
• ~：表示區(qū)分大小寫正則匹配
• ~*：表示不區(qū)分大小寫正則匹配
• ^~：表示 URI 以某個(gè)常規(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
默認(rèn)值：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只有一個(gè)html文件，所以需要在nginx.conf的對應(yīng)location里配置一行代碼 try_files $uri $uri/ /index.html; 告訴nginx如果按順序檢查文件是否存在，若不存在則重定向到index.html文件

總結(jié)

本來只是一個(gè)自己部署項(xiàng)目問題的排查，實(shí)際只需要一行代碼就能解決問題，但解決問題只是最基礎(chǔ)的。更需要的是通過這個(gè)問題去補(bǔ)充更多自己不了解的東西。只有這樣才能學(xué)的更多，不能只是頭痛醫(yī)頭，腳痛醫(yī)腳。

以上就是Nginx解決history模式下頁面刷新404問題示例的詳細(xì)內(nèi)容，更多關(guān)于Nginx history頁面刷新404的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論