这篇文章主要分享一下通过HTML5history API的时候,使用NodeJS后端应该如何配置,来避免产生404的问题,这里是使用的express的框架,主要是通过connect-history-api-fallback这个中间件来实现的!

前言

这里使用vue-router来实现的单页应用为例,访问http://cnode.lsqy.tech,进入首页,点击下面的tab栏,一切都是很正常的,但当这时候你 ctrl+command+R 或 点击浏览器的刷新按钮 或 在地址栏上再敲一下回车,总之就是刷新,发现就会出现404了,比如这样的错误Cannot GET /message/,因为默认浏览器会认为你是在请求服务端的路由,服务端那边没有对应的处理,所以自然就会出错了,下面来引入connect-history-api-fallback这个中间件,来无痛使用优雅的History路由模式。

引入connect-history-api-fallback

首先看它的介绍Middleware to proxy requests through a specified index page, useful for **Single Page Applications** that utilise the HTML5 History API.

中文意思就是一个能够代理请求返回一个指定的页面的中间件,对于单页应用中使用HTML5 History API非常有用。

用法

经典的npm安装,注意将其作为依赖项,加上--save

  npm install --save connect-history-api-fallback

接下来是在express的简单使用

var http = require('http');
var express = require('express');
var ecstatic = require('ecstatic');
var history = require('connect-history-api-fallback'); var app = express(); app.use(history());
app.use(ecstatic({ root: __dirname + '/dist' })); http.createServer(app).listen(6565);

这样配置完之后,再重新restart一下项目,你就会发现现在可以非常顺畅的使用了,不管你是刷新了浏览器还是直接通过url从外部访问都不会出现404的结果了。

另外,connect-history-api-fallback还有一些可配置的Options项,这个如果需要详细了解可以仔细看看其API的调用即可

总结

其实有时候对于单页面应用,虽然是单页的,但是也会有很多不仅仅是必须从首页进去的情况,比如要分享某个页面,这样我们希望能够直接通过这个简洁的url来跳到这个指定的页面,但是如果不做上面的配置的话就会出现404这样的错误了,其实这样的话也算是接管了传统的服务端路由,来完全交给前端来处理路由跳转了,这样以后的url就非常简洁优雅了。

reference: github地址connect-history-api-fallback

文章首发自个人博客单页面应用的History路由模式express后端中间件配合

单页面应用的History路由模式express后端中间件配合的更多相关文章

  1. nginx 一个端口布署多个单页应用(history路由模式)。

    目前web开发 使用一般前后端分离技术,并且前端负责路由.为了美观,会采用前端会采用h5 history 模式的路由.但刷新页面时,前端真的会按照假路由去后端寻找文件.此时,后端必须返回index(i ...

  2. history路由模式下的nginx配置

    路由模式 众所周知,浏览器下的单页面应用的路由模式有下面两种: hash 模式和 history 模式.hash 模式通用性好,而且不依赖服务器的配置,省心省力,但是缺点是不够优雅.相比于 hash ...

  3. H5单页面架构:自定义路由 + requirejs + zepto + underscore

    angular优点: 强大的数据双向绑定 View界面层组件化 内置的强大服务(例如表单校验) 路由简单 angular缺点: 引入的js较大,对移动端来说有点吃不消 语法复杂,学习成本高 backb ...

  4. nginx history路由模式时,页面返回404重定向index.html

    1.路由默认是带#的,有时我们感觉不美观,就使其变为history模式,也就没有#字符 2.# 如果找不到当前页面(404),就返回index.html,重新分配路由 location ^~/prod ...

  5. Vue history路由模式 apache配置上线

    1. 首先在vue项下的router.js 文件配置 mode为history模式,并且设置好对应的base选项 说明:base配置为你当前项目实际上线时所在的目录文件夹, 我这就是放在站点的根目录下 ...

  6. vue history路由模式 Nginx 生产实践

    nginx(带二级目录的配置) location ~* /A {    alias  /opt/nginx-1.4.7/html/ued/A;     try_files $uri $uri /A/s ...

  7. AngularJS学习笔记(三) 单页面webApp和路由(ng-route)

    就我现在的认识,路由($route)这个东西(也许可以加上$location)可以说是ng最重要的东西了.因为angular目前最重要的作用就是做单页面webApp,而路由这个东西是能做到页面跳转的关 ...

  8. 解决vue单页面应用做微信JSSDK注入权限时出现“invalid signature”(ios端)

    --都说微信开发多坑,没想到遇到一个天坑. 在做一个vue项目时,要用到微信JS-SDK,官方文档详见:https://developers.weixin.qq.com/doc/offiaccount ...

  9. [后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序

    一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...

随机推荐

  1. AIX7.1安装zabbix_agent3.4

    1.在zabbix官网https://www.zabbix.com/download下载Zabbix pre-compiled agents 2.Zabbix pre-compiled agents安 ...

  2. python中的元类(metaclass)

    认识python中元类的准备工作. 1,首先需要明白一个概念就是python中一切皆为对象. input: class Trick(object): pass ') print type(1234) ...

  3. 算法与数据结构基础 - 广度优先搜索(BFS)

    BFS基础 广度优先搜索(Breadth First Search)用于按离始节点距离.由近到远渐次访问图的节点,可视化BFS 通常使用队列(queue)结构模拟BFS过程,关于queue见:算法与数 ...

  4. S2第四章

  5. PHP与ECMAScript_3_常用字符串函数

      PHP ECMAScript 长度 strlen($str) str.length     查找类 $str[n]                                          ...

  6. div span img对齐,垂直居中对齐问题

    我想你们在前端开发中或多或少都遇到过这种问题,文字和图片不能平齐,很是头疼. HTML代码: <div class="">小太阳<span>小太阳</ ...

  7. Linux 根分区扩容

    扩容分区之前,首先要保证当前有闲置空间 1. 查看当前现有分区情况 df -lah 可以看出当前根分区只剩 6.4 G 可用 2. 查看当前磁盘情况 fdisk -l 可以看出有 30G的未分配空间 ...

  8. WIZnet-io6Library下载及使用

    概观 io6Library是一个IPv6集成库,可以轻松集成和管理使用WIZnet硬连线双TCP / IP堆栈控制器(WIZCHIP)产品系列的用户应用程序. io6Library用于管理依赖于用户特 ...

  9. cogs 1254. 最难的任务 Dijkstra + 重边处理

    1254. 最难的任务 ★   输入文件:hardest.in   输出文件:hardest.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述] 这个真的很难.算出 123 ...

  10. 牛客多校训练第八场G.Gemstones(栈模拟)

    题目传送门 题意: 输入一段字符串,字符串中连续的三个相同的字符可以消去,消去后剩下的左右两段字符串拼接,求最多可消去次数. 输入:ATCCCTTG   输出:2 ATCCCTTG(消去CCC)——& ...