这篇文章主要分享一下通过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. spring源码分析之配置文件名占位符的解析(一)

    一.直接写个测试例子 package com.test; import org.junit.Test; import org.springframework.context.ApplicationCo ...

  2. laravel 模型查询总结

    1.Model::find($id);//查找主键为$id的数据 2.Model::find([$key1,$key2]);//使用双主键进行查找 3.Model::findOrFail($id);/ ...

  3. 【JDK】JDK源码-Queue, Deque

    概述 Queue 和 Deque 都是接口.其中 Queue 接口定义的是一个队列,它包含队列的基本操作:入队(enqueue)和出队(dequeue). Deque 接口继承自 Queue 接口,表 ...

  4. postman使用pre-request script计算md5

    接口加了验签逻辑,具体是md5(salt+时间戳).被某君吐槽说测试不方便啊能不能先关掉.其实没有必要打开又关闭验签功能,postman的pre-request script功能完全可以模拟客户端加密 ...

  5. 完全零基础在Linux中安装 JDK

    完全零基础在Linux中安装 JDK 总体思路:先确定没有Java程序了 — 然后创建相应路径文件夹 — 下载JDK — 解压到当前路径 — 自定义文件名称 — 配置环境变量 — 检查是否安装成功 第 ...

  6. 【Java例题】5.1 多项式计算

    1. 计算下列多项式的值. pn=an*x^n+...+a1*x+a0其中,"^"表示乘方. x.n以及ai(i=0,1,...,n-1)由键盘输入. package chapte ...

  7. 2019牛客多校训练第四场K.number(思维)

    题目传送门 题意: 输入一个只包含数字的字符串,求出是300的倍数的子串的个数(不同位置的0.00.000等都算,并考虑前导零的情况). sample input: 600 1230003210132 ...

  8. 微信公众号发送消息给用户 php

    1.微信公众号 这里得话 一开始先去看了 微信公众号的接口 发现网页授权需要时认证的服务号,一开始想的是那去申请一个认证的服务号岂不是很费事,然后网上搜了搜,发现了还有微信公众号个人测试号这个东西,所 ...

  9. Draw.io

    如何给类图增加一个字段? 选中一个字段,然后按 Ctrl +Enter 即可. 参考:Add row to class diagram - stackoverflow

  10. curl工具使用实例

    curl是一个命令行工具,其基于libcurl库,用于发送网络请求,获取并展示响应数据,下面来看curl的具体用法. 1.下载网页源码 curl命令直接接URL,用于下载指定URL的网页源码,并将其显 ...