连接历史- api- fall- back
中间软件通过指定的索引页向代理请求,用于使用 HTML5 History API 的单页应用程序 .
目录
导言
单页应用程序通常只使用一个索引文件,即
由网页浏览器访问: 通常 index.html。在应用程序中导航
然后通常在 JavaScript 的帮助下使用它处理
HTML5 历史 API。 。 。 .
当用户点击刷新按钮或直接使用时, 会产生问题
访问登陆页面以外的页面,例如:. /help 或者说 /help/online
由于网络服务器绕过索引文件在此位置查找文件.
由于您的应用程序是 SPA, 网络服务器将无法尝试获取文件并返回 a 404 - 未找到
给用户的消息.
这个微小的中间器件解决了一些问题。 具体来说,它将会改变
请求的位置到您指定的索引( 默认为 /index.html(中文(简体) )
凡符合下列标准的请求:
- 请求是GET请求
- 接受
text/html, (中文(简体) ), - 不是直接文件请求, 即请求的路径不包含
.(DOT) 特性和 - 不匹配选项中提供的图案。 重写( 见下文选项)
使用量
中间软件通过国家预防机制提供,很容易被添加.
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);
当然,你也可以使用这块中间软件,上面写着:
var express = require('express');
var app = express();
app.use(history());
选项
您可以在获取中间软件时选择将选项传递到库
var middleware = history({});
指数
覆盖索引( 默认) /index.html) (中文(简体) ). 这是当中间软件确定需要重写请求路径时将使用的请求路径.
这不是磁盘上文件的路径 。 而是 HTTP 请求路径 。 下游连接/表达中件负责将这个重写的HTTP请求路径转化为实际响应,例如通过从磁盘读取一个文件.
history({
index: '/default.html'
});
重写
当请求 URL 匹配 regex 模式时覆盖索引 。 您可以重写为静态字符串, 或者使用一个函数来转换收到的请求 .
以下将重写一个符合 /\/soccer/ 样式改为 /soccer.html。 。 。 .
history({
rewrites: [
{ from: /\/soccer/, to: '/soccer.html'}
]
});
或者可以使用函数来对重写过程拥有更多的控制. 例如,下列清单说明如何将请求 /libs/jquery/jquery.1.12.0.min.js 类似的东西可以通向 ./bower_components/libs/jquery/jquery.1.12.0.min.js。如果在 URL 路径中有一个 API 版本,您也可以使用它.
history({
rewrites: [
{
from: /^\/libs\/.*$/,
to: function(context) {
return '/bower_components' + context.parsedUrl.pathname;
}
}
]
});
函数将总是以具有下列属性的上下文对象来调用 :
- 解析: 提供URL信息 URL 模块
url.parse。 。 。 . - 匹配: 匹配结果阵列
String.match(...)。 。 。 . - 请求: HTTP 请求对象.
动词
此中间软件默认不会日志任何信息 。 如果您希望激活日志, 您可以通过 verbose 选项或指定日志函数.
history({
verbose: true
});
或者用你自己的登录器
history({
logger: console.log.bind(console)
});
html 接受信头
覆盖默认值 Accepts: 匹配 HTML 内容请求时被询问的标题( 默认 : ['text/html', '*/*']) (中文(简体) ).
history({
htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
})
禁用点规则
禁用上述点规则 :
[...]不是一个直接的文件请求,即请求的路径不包含
.(DOT)字符[.]
history({
disableDotRule: true
})