zoukankan      html  css  js  c++  java
  • koa2-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

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

      

    const history = require('koa2-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
    

      



  • 相关阅读:
    一些網址
    mousedown、mouseup、click事件之间的关系及执行顺序
    快速的画一个三角形
    在较小的屏幕下展示一个超宽的图片,如何让图片居中显示?
    Python 模块安装的一些问题
    Python Django 的使用
    Python WEB框架的介绍
    Python 几个前端插件的简单使用
    Python JQuery 正则表达式mini版
    HC蓝牙模块
  • 原文地址:https://www.cnblogs.com/xiaosongJiang/p/10090903.html
Copyright © 2011-2022 走看看