Express 抛出 404 是否在 url 中有点 - Vue, webpack

Question

假设我有一个 Vue2 应用程序运行ning by npm 运行 dev 推荐（标准，官方样板）。我正在使用 vue-router 通过应用程序提供路由。

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

我必须支持这些类型的链接。我是在 Vue 端做的（路径如下：/foo,:foo,bar,:bar,baz.html

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

我做了一些挖掘，发现了一些解决方案，例如将 rewrites 添加到 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 和 returns 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 
  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();
  }
});

这将...

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

这样做的好处是搜索引擎最终会流行起来，并列出新的 URL 代替旧的。在未来的某个时候，所有对旧 URL 的引用都将不复存在。届时，您将能够删除具有 few/no 负面后果的重定向处理程序，而不是破坏手动硬编码的遗留 URLs.

链接。

Express 抛出 404 是否在 url 中有点 - Vue, webpack

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

node.js

express

webpack

vue.js

vue-router