connect-history-api-fallback 使用

Posted 2021-01-25 不知不觉、

单页面应用程序(SPA)通常使用一个web浏览器可以访问的索引文件，比如index.html，然后，在HTML5 History API的帮助下（vue-router就是基于History API实现的），借助javascript处理应用程序中的导航。当用户单击刷新按钮或直接通过输入地址的方式访问页面时，会出现找不到页面的问题，因为这两种方式都绕开了History API，而我们的请求又找不到后端对应的路由，页面返回404错误。
connect-history-api-fallback中间件很好的解决了这个问题。具体来说，每当出现符合以下条件的请求时，它将把请求定位到你指定的索引文件(默认为/index.html)。

请求是Get请求
请求的Content-Type类型是text/html类型
不是直接的文件请求，即所请求的路径不包含.(点)字符
不匹配option参数中提供的模式

 

实际例子

前端使用vue搭建页面，然后build，生成静态的js css 文件，把文件放在后端的静态资源文件public中，如果直接在浏览器上访问 localhost:8000/xxxx 后端找不到xxxx路由就会报404

使用connect-history-api-fallbackz之后，koa就会把所有的get方式的请求都发给/index.html,然后由vue-router来接管页面路由

　　

const history = require(‘connect-history-api-fallback‘);
//这句代码需要在koa-static上面 
app.use(history()); 
app.use(require(‘koa-static‘)(path.join(__dirname, ‘./public‘))));

　　

connect-history-api-fallback中间件有几个可选配置项：

index：配置默认的index页面
rewrites：通过正则配置，配置相关路由
verbose：日志选项
htmlAcceptHeaders：覆盖Accepts，更改请求的dataType配置
disableDotRule