首頁  >  文章  >  運維  >  Nginx怎麼解決history模式下頁面重新整理404問題

Nginx怎麼解決history模式下頁面重新整理404問題

WBOY
WBOY轉載
2023-05-13 14:40:112609瀏覽

    前置知識

    • 單頁應用程式(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問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    陳述:
    本文轉載於:yisu.com。如有侵權,請聯絡admin@php.cn刪除