node.js - Express 抛出 404 url​​ 中是否有点 - Vue、webpack

Question

假设我有一个由 npm run dev 推荐运行的 Vue2 应用程序(标准、官方样板)。我正在使用 vue-router 通过应用程序提供路由。

我有一些来自搜索引擎的遗留网址，其中包含我的应用程序旧版本的地址，例如 /foo,123,bar,456,baz.html

我必须支持这些类型的链接。我在 Vue 端完成(路径如:/foo,:foo,bar,:bar,baz.html

但我遇到了问题 - Express 服务器返回 404 - 无法 GET/foo,123,bar,456.baz.html

我做了一些挖掘，发现了一些解决方案，例如将重写添加到connect-history-api-fallback

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

它有帮助......但不能解决问题......

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

但是...

Express 仍尝试遍历/foo,123,bar,456,baz.html 并返回 404。

有什么想法吗？

Answer 1

^{免责声明:这不是我的专业领域，因此无法保证此答案的效果如何。}

在服务器文件的顶部，尝试放置一个将重定向到正确 URL 的请求处理程序。更具体地说，在 app.use 的所有其他实例之上，放置一个如下所示的处理程序:

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();
  }
});

这将...

1. 拦截所有请求。
2. 如果它与您的旧网址匹配，请重定向到新网址。
3. 如果不匹配，请继续，就好像我们从未拦截过该请求一样。

这样做的好处是搜索引擎最终会流行起来，并列出新的 URL 来代替旧的 URL。在将来的某个时刻，对旧 URL 的所有引用都将不再存在。那时，您将能够删除重定向处理程序，除了破坏旧 URL 的手动硬编码链接之外，几乎不会产生任何负面后果。