單頁應用程式(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. 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 [=|~|~*|^~|@] uri { ... } location @name { ... }
# 将所有请求直接转发给服务器的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 path[alias]預設值:root html
設定段:http、server、location、if
處理結果:root 路徑+ location 路徑
語法: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的問題
告訴nginx如果按順序檢查檔案是否存在,若不存在則重定向到index.html檔案
以上是Nginx怎麼解決history模式下頁面重新整理404問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!