Express JS 将所有路径重定向到 static 维护页面

Question

I have an Angular Web App with a Express Node JS Backend and I would like to display a static Under construction page, so that web app cannot be used during a specific time period. In my current setup I have a initStaticPages function (please see below), which inits all the routes. I also added a new Page which is served via /maintenance.

When writing a middleware which always redirects to /maintenance and adding this middleware to all routes, I get a too many redirects error and the web app is down. Adding middleware to all routes except index page "/" is working, but not the behaviour I wanted to achieve. Anybody knows how to solve this? Would appreciate any help. Thanks a lot

router.js

const initStaticPages = (router) => {
  router.use('/', checkMaintenanceMode, express.static('public'))
  router.use('/main', checkMaintenanceMode, requireAccess, express.static('public'))
  router.use('/login', checkMaintenanceMode, express.static('public'))
  router.use('/logout', checkMaintenanceMode, express.static('public'))
  router.use('/logout?reason=timeout', checkMaintenanceMode, express.static('public'))
  router.use('/requestHistory', checkMaintenanceMode, requireAccess, express.static('public'))
  router.use('/recurringRequest', checkMaintenanceMode, requireAccess, express.static('public'))
  router.use('/maintenance', express.static('public'))
}

module.exports = () => {
  const router = express.Router()
  initStaticPages(router)
  return router
}

Simple Middleware would be like this: There will be also some conditions, but for simplicity I left it out.

const checkMaintenanceMode = (req, res, next) => {
    res.redirect('/maintenance/')
}

main.js

const app = require('express')()
const router = require('./router')()
const cookieParser = require('cookie-parser')
const compression = require('compression')

const port = process.env.PORT

app.use(compression())
app.use(cookieParser())
app.use(router)

app.listen(port, () => console.log(`Running on port ${port}`))

Second Error after adjusting the ordering of routes: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

In the following the content of public folder and maintenance container. The index.html has some router-outlet included and serves the specific Container Component. In this case /maintenance. Apparently when adding the middleware to / route, it's throwing the error from above and showing a blank page.

 /app/frontend/app/container/maintenance: maintenance.component.css maintenance.component.html maintenance.component.ts /app/server/public: assets index.html vendor-es2015.3f2dce1d421f11b1eba1.js vendor-es2015.3f2dce1d421f11b1eba1.js.map vendor-es5.3f2dce1d421f11b1eba1.js vendor-es5.3f2dce1d421f11b1eba1.js.map polyfills-es5.34831379c55aac23d35e.js polyfills-es5.34831379c55aac23d35e.js.map main-es2015.730bc485b11bbd634316.js main-es2015.730bc485b11bbd634316.js.map polyfills-es2015.8c0828ece2f5d1fedbfb.js polyfills-es2015.8c0828ece2f5d1fedbfb.js.map main-es5.730bc485b11bbd634316.js main-es5.730bc485b11bbd634316.js.map runtime-es2015.dc25f63d6f9e75106165.js runtime-es2015.dc25f63d6f9e75106165.js.map runtime-es5.dc25f63d6f9e75106165.js runtime-es5.dc25f63d6f9e75106165.js.map 3rdpartylicenses.txt jsoneditor-icons.15f2789dd231f36d43a4.svg styles.9211410addacf27114df.css styles.9211410addacf27114df.css.map

Answer 1

This looks like a case of specificity. Your routes should be defined from most specific to most general.

/ is a route that will match literally anything including /maintenance . So you hit any route / is getting hit, then it redirects to /maintenance which obv matches with / and a cycle is created.

  router.use('/main', checkMaintenanceMode, requireAccess, express.static('public'))
  router.use('/login', checkMaintenanceMode, express.static('public'))
  router.use('/logout?reason=timeout', checkMaintenanceMode, express.static('public'))
  router.use('/logout', checkMaintenanceMode, express.static('public'))
  router.use('/requestHistory', checkMaintenanceMode, requireAccess, express.static('public'))
  router.use('/recurringRequest', checkMaintenanceMode, requireAccess, express.static('public'))
  router.use('/maintenance', express.static('public'))
  router.use('/', checkMaintenanceMode, express.static('public'))

Note: using similar logic I reordered your /logout routes. Not related to the question though.