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