Apache, Nginx, Express, Egg.js Support Frontend HTML5 History Mode

0
Node.js

When you use history mode, URLs look like normal URLs, e.g. http://xxx.com/user/id.

To perfectly support this mode, backend configuration support is also needed. When the application is a single-page client application, if the backend is not correctly configured, when users directly access http://xxx.com/user/id in the browser, it will return 404.

Backend support examples:

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
  try_files $uri $uri/ /index.html;
}

Node.js (Express)

If using Express, you can use connect-history-api-fallback https://github.com/bripkens/connect-history-api-fallback

Egg.js

// app/middleware/history_fallback.js
module.exports = () => {
  return async function historyFallback(ctx, next) {
    await next();
    if (ctx.status === 404 && !ctx.body) {
      if (ctx.acceptJSON) {
        ctx.body = { error: 'Not Found' };
      } else {
        ctx.render('index')
      }
    }
  };
};

// config/config.default.js
module.exports = {
  middleware: [ 'historyFallback' ],
};

Article Link:

https://alili.tech/en/archive/nodejs/6eff5ac9/

# Latest Articles