介绍
单页应用程序(SPA)通常只使用Web浏览器可访问的一个索引文件:通常是index.html。然后,在HTML5历史API的帮助下,通常使用JavaScript处理应用程序中的导航。当用户点击刷新按钮或直接访问登录页面以外的页面时,这会导致问题,例如/help或/help/online,因为Web服务器会绕过索引文件来定位此位置的文件。由于您的应用程序是SPA,Web服务器在尝试检索文件时将失败,并向用户返回404-未找到的消息。
这个小小的中间件解决了一些问题。具体来说,只要有满足以下条件的请求,它就会将请求的位置更改为您指定的索引(默认为/index.html):
请求是GET请求
它接受文本/html,
不是直接文件请求,即请求的路径不包含。(点)字符和
与Options.Rewrites中提供的模式不匹配(请参阅下面的选项)
用法
npm install --save connect-history-api-fallback
添加库文件
var history = require('connect-history-api-fallback');
两种方法链接
var connect = require('connect');
var app = connect()
.use(history())
.listen(3000);
和express协同
var express = require('express');
var app = express();
app.use(history());
选项
指定索引以及重写
var middleware = history({});
history({
index: '/default.html'
});
history({
rewrites: [
{ from: /\/soccer/, to: '/soccer.html'}
]
});
使用函数对重写过程进行更多的控制
history({
rewrites: [
{
from: /^\/libs\/.*$/,
to: function(context) {
return '/bower_components' + context.parsedUrl.pathname;
}
}
]
});
默认情况下,此中间件不记录任何信息。如果您希望激活日志记录,那么可以通过verbose选项或指定一个logger函数来激活日志记录
history({
verbose: true
});
history({
logger: console.log.bind(console)
});
覆盖默认接受:匹配HTML内容请求时查询的头(默认值:''text/html'、'*/*'])。
history({
htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
})
禁用上面提到的点规则:
history({
disableDotRule: true
})
更多信息https://www.npmjs.com/package/connect-history-api-fallback