HTTP 服务对 SPA 导航的处理

后端 HTTP 服务如果仅向外提供了网站根路径/到文件index.html的映射,而没有对单页应用中其他路由路径进行处理,则会在没有经过根路由直接访问指定子路由时被报告 404 NOT FOUND 错误。

出现这种错误的原因是当跳转到 SPA 的根路由时,HTTP 服务提供的是针对index.html的映射,并且当访问其下详细路由路径(如/order/123)时都是由 SPA 的路由系统进行处理,所以不会出现任何问题。但是在直接访问指定路由而非根路由时,HTTP 服务将不能对这个详细路由路径进行识别,所以会报出 404 NOT FOUND 错误。

要解决这个问题,可以让 HTTP 服务将对于其他路径的访问都重定向至index.html,交由 SPA 的路由系统来进行处理。

以下给出一个 Express 服务的示例,需要注意的是示例中对于路由路径*的捕获,应该在其他功能路径(如/api)之后定义,否则将影响其他功能的访问。

const express = require('express');
const path = require('path');
const port = process.env.PORT || 3000;
const app = express();

app.use(express.static(__dirname + '/public'));

app.get('*', function (request, response) {
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'));
});

app.listen(port);

如果 HTTP 服务使用 Nginx 进行负载,那么配置就简单许多了,只需要使用try_files指令即可。

server {
  location / {
    try_files $url /index.html;
  }
}