Nginx拦截Vue哈希路由/test端点失效，如何配置返回403？

你遇到的问题核心在于Vue/Quasar的Hash模式路由特性：浏览器发送请求时，#后面的路径片段不会被提交到服务器。也就是说，访问example.com/#/test时，Nginx实际收到的请求路径只有/，根本看不到#/test这部分，自然不会触发你配置的location ^~ /test规则——这就是为什么只有example.com/test会返回403。

根据你的需求，有两种可行处理方式，推荐优先第一种：

1. 切换到History模式（推荐） #

History模式下路由不带#，浏览器会把完整路径发送给服务器，此时Nginx就能正常拦截目标路径。

步骤： #

• 修改Vue/Quasar路由配置：
  如果是Quasar框架，在quasar.conf.js中找到build下的vueRouterMode，设置为'history'：

  build: {
    vueRouterMode: 'history' // 原先是'hash'
  }
  

  如果是纯Vue项目，在router/index.js中修改Router实例的mode：

  const router = new VueRouter({
    mode: 'history',
    routes: [...]
  })
  

• 调整Nginx配置：
  将拦截规则放在location /前面（Nginx按顺序匹配location），确保优先拦截/test路径：

  server {
      root /usr/share/nginx/html;
      index index.html;
  
      # 优先拦截/test路径，返回403
      location ^~ /test {
          deny all;
      }
  
      # 处理单页应用路由回退
      location / {
          try_files $uri $uri/ /index.html;
      }
  }
  

2. 保持Hash模式，在前端路由拦截 #

如果不想修改路由模式，可以直接在Vue/Quasar的路由配置中拦截/test路径，前端直接返回403提示：

示例代码（Vue Router）： #

const routes = [
  // 其他正常路由
  {
    path: '/test',
    beforeEnter: (to, from, next) => {
      // 直接跳转到自定义403页面
      next('/403');
    }
  },
  {
    path: '/403',
    component: () => import('../views/403.vue') // 自定义403页面组件
  }
]

或者更简单：不注册/test路由，访问该路径时会进入404，你可以把404页面改成403提示内容。

内容的提问来源于stack exchange，提问作者Szelek