在 FeathersJS 中使用 connect-history-api-fallback 中间件来提供 Vue.js SPA

Question

如标题所示，我在 FeathersJS 中提供来自 public/index.html 的 Vue.js 单页应用程序。由于我使用的是 vue-router 的 HTML5 历史记录模式，因此我必须使用像 connect-history-api-fallback 这样的中间件才能将请求的前端位置重写为 /index.html.

在 src/middleware 中 app.use(notFound()); 之前设置这个中间件不起作用，因为 Feathers 在其他所有内容之前提供静态文件，所以当请求被重写时，没有任何东西出现 /index.html 和 notFound 提供 404 响应。

在 src/app.js 中的 .use('/', serveStatic(app.get('public'))) 之前配置它也是有问题的，因为它会将每个服务请求重写为 /index.html，使 API 调用无法访问。

我最终将 serveStatic 中间件移动到 .configure(services) 之后，并将 connect-history-api-fallback 放在正上方，如下所示：

app.use(compress())
  .options('*', cors())
  .use(cors())
  // favicon and serveStatic used to be here
  .use(bodyParser.json())
  .use(bodyParser.urlencoded({ extended: true }))
  .configure(hooks())
  .configure(rest())
  .configure(socketio())
  .configure(services)
  .use(require('connect-history-api-fallback')())
  // now they are down here
  .use(favicon(path.join(app.get('public'), 'favicon.ico')))
  .use('/', serveStatic(app.get('public')))
  .configure(middleware);

我的问题如下：这种方法有任何性能或安全缺陷吗？

Answer 1

使用您发布的配置，实际上没有任何安全问题。

如果您要用 SSR 中间件替换 serveStatic 中间件，您需要删除 SSR 中间件之前的 CORS headers 以避免通过跨站点请求（CSRF "attacks" 使用 cookies）。

在 FeathersJS 中使用 connect-history-api-fallback 中间件来提供 Vue.js SPA

Using connect-history-api-fallback middleware in FeathersJS for serving Vue.js SPA

node.js

express

single-page-application

feathersjs