laravel - Vue 路由器历史模式结合 laravel catch all 重定向 404 header 给出 200 header 状态码

Question

我在 Laravel 后端有一个 Vue 项目，SEO 对其很重要。使用我当前的设置，我将所有传入请求重定向到我的 Vue 应用程序。在我的 Vue 应用程序中，我使用 Vue Router 处理路由。

在我的设置中，无法识别的页面被定向到我喜欢的组件(404 组件)，但浏览器获得 200 状态代码。我的问题是:

如何为浏览器提供正确的 404 状态代码？

---

我的代码摘要:

从 Laravel(web.php 文件)中将所有内容重定向到我的 Vue 应用程序:

Route::get( '/{catchall?}', function () {
    return view('app');
})->where('catchall', '.*');

在我的 Vue 路由中，我捕获了所有无法识别的路径以显示我的“404 组件”:

export const NOT_FOUND = {
  path: '/*',
  name: 'not found',
  component: NotFoundComponent,
};

为了完整起见，我在 Vue 应用程序中设置了路由器:

export const router = new VueRouter({
  routes: routes,
  mode: 'history',
  base: '/',
  fallback: true,
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
});

Answer 1

不能 100% 确定，但我敢打赌 Google 在重定向到主页之前就知道它是 404。

下载 Screaming Frog(免费网络抓取工具)并抓取所述页面，如果在您的重定向规则发生之前出现 404 状态，您会看到它出现在那里。