connect-history-api-fallback 使用

Posted 不知不觉、

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了connect-history-api-fallback 使用相关的知识,希望对你有一定的参考价值。

单页面应用程序(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

  









以上是关于connect-history-api-fallback 使用的主要内容,如果未能解决你的问题,请参考以下文章