这篇文章主要分享一下通过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.
中文意思就是一个能够代理请求返回一个指定的页面的中间件,对于单页应用中