Express throws 404 whether has dot in url - Vue, webpack

Question

lets say I have a Vue2 application running by npm run dev commend (standard, official boilerplate). I am using vue-router to provide routing through the application.

I have some legacy urls from search engines which contains addresses to old version of my application e.g /foo,123,bar,456,baz.html

I have to support those kinds of links. I did it on Vue side (path like: /foo,:foo,bar,:bar,baz.html

but I got problems - Express server returns 404 - Cannot GET /foo,123,bar,456.baz.html

I did some digging and I found some solutions like adding rewrites to connect-history-api-fallback

rewrites: [
  {
    from: /^\/.*$/,
    to: function(ctx) {
      return ctx.parsedUrl.pathname.replace('.html', '');
    }
  }
],

it helps... but doesn't solve the problem...

Rewriting GET /foo,123,bar,456,baz.html to /foo,123,bar,456,baz

but...

Express still tries to go over /foo,123,bar,456,baz.html and returns 404.

Any ideas?

The Guy with The Hat · Accepted Answer · 2017-12-21T16:23:41.670

^{Disclaimer: this is not my area of expertise, so there are no guarantees about how well this answer will work.}

At the top of the server file, try putting a request handler that will redirect to the correct URL. More specifically, above all the other instances of app.use, put a handler such as this:

app.use((req, res, next) => {
  var url = new URL(req.protocol + '://' + req.get('host') + req.originalUrl);
  // "get full URL" code from https://stackoverflow.com/a/10185427/2846923
  if (url.pathname.endsWith('.html') /* or whatever other condition fits your needs */) {
    url.pathname = url.pathname.slice(0, -5);
    res.redirect(301, url.href)
  } else {
    next();
  }
});

This will...

Intercept all requests.
If it matches your legacy URL, redirect to the new URL.
If it doesn't match, continue on as if we never intercepted that request.

This has the advantage that search engines should eventually catch on, and list the new URL in place of the old one. At some point in the future, all references to the old URL will no longer exist. At that point you'll be able to remove the redirect handler with few/no negative consequences other than breaking manually hardcoded links to the legacy URLs.

Express throws 404 whether has dot in url - Vue, webpack

1 Answers1