Nginx解決history模式下頁面刷新404問題示例

目錄

• 前置知識
• Nginx
• location
• 常用匹配規則
• root 與 alias
• 解決刷新后出現404的問題
• 總結

前置知識

• 單頁應用(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或域名后發生的事情（有點面試題的味道了嗷