前置知識(shí)

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

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

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

Nginx

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

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

location

語(yǔ)法

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

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

常用匹配規(guī)則

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

root 與 alias

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

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

[alias]
語(yǔ)法：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的問(wèn)題

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

總結(jié)

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

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

最新評(píng)論