标签：express 中间件 api connect fallback History 路由 history

这篇文章主要分享一下通过HTML5的history 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后端中间件配合

标签：express,中间件,api,connect,fallback,History,路由,history
来源： https://www.cnblogs.com/lsqy/p/11437242.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。