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

哆啦A夢的前埠袋發表於2017-10-20
Nginx前端路由

首發於我的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也可以寫在前端路由中了

相關文章