Vue router history mode in combination with laravel catch all to redirect 404 header gives 200 header status code

Question

I have a Vue project on a Laravel backend for which SEO is important. With my current setup I redirect all incoming requests to my Vue app. Within my Vue app I handle the routing with Vue Router.

Within my setup unrecognized pages are directed to a component of my liking (404 component) but the browser gets a 200 status code. My question about this:

What can I do to give browsers a correct 404 status code?

ABSTRACT OF MY CODE:

Redirecting all to my Vue app from within Laravel (web.php file):

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

In my Vue routes I catch all unrecognised paths to show my "404-component":

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

For completeness my router setup within my Vue app:

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

The question about SEO is off-topic. You can ask that on [Webmasters.SE](//webmasters.stackexchange.com). The question about sending a 404 is on-topic. If you'll edit the SEO part out this will avoid closure — Machavity, Feb 08 '19 at 13:33

score 0 · Answer 1 · answered Feb 14 '19 at 21:25

0

Can't be 100% sure, but I bet Google knows it's a 404 before the redirect to home.

Download Screaming Frog (free web crawl tool) and crawl said page if there's a 404 status before your redirect rule takes place you'll see it represented there.

answered Feb 14 '19 at 21:25

Biz

26
2

I am afraid there is no way to tell it is a 404. Also for google (checked with Screaming Frog). That is why I would like to somehow emit it... – Rogier Nov 28 '19 at 23:46

Vue router history mode in combination with laravel catch all to redirect 404 header gives 200 header status code

1 Answers1