42. nginx 匹配的 try_file 與前端路由的優先級問題

首發於個人github博客, 歡迎關注

1. 場景描述:

   1. 訪問www.abc.com， 以後點擊界面裏面的logout，前端路由處理，跳轉到www.abc.com/login
   2. 可是登陸頁面刷新以後，就顯示nginx 404了
   3. 奇怪的地方就在於，爲什麼退出的時候，重定向到/login的時候，沒有報404?
   4. 前端路由重定向到/login邏輯：this.$router.push({name: 'login'});

   5. 貼下前端路由配置

      routes: [
          {
               name: 'home',
               path: '/',
               component: Home,
               meta: { requiresAuth: true },
           },
           {
               path: '/login',
               name: 'login',
               component: Login,
           },
           {
               path: '*',
               component: NotFound,
           }
       ]複製代碼

      1. 現有nginx配置

         location / {
              root: /var/data/static;
          }複製代碼

2. 解決：

   1. 爲什麼點擊退出能夠正常顯示登陸頁面？

      由於點擊退出，使用的redirect是前端路由this.$router.push({name: 'login'});來實現的，這時候已經有index.html 和相關的js了，能夠直接使用前端路由跳轉到/login路由對應的組件

   2. 爲什麼刷新的時候顯示: nginx/404？

      1. 由於刷新的時候，會先向服務器請求xxxx.com/login，
      2. 這時候服務器的nginx配置中沒有關於/login路徑的配置，直接報nginx/404的錯誤

   3. 如何解決？

      在nginx的location /{root xxxpath}中添加try_file: /index.html的配置

   4. 解釋：

      1. nginx進行匹配路徑的時候，發現沒有/login的路徑，便會轉到/路徑處理。
      2. 發現root路徑下(是靜態文件的root目錄，不是linux的root目錄)沒有login文件，就會try_file規則，返回index.html,
      3. 這樣瀏覽器拿到index.html 以後，開始加載其中的前端路由部分
      4. 這時候/login就會在前端路由中找到匹配規則。

   5. 同理／404也能夠寫在前端路由中了