koa2怎么指定404页？
发布于 8 年前 作者 hezhongfeng 14041 次浏览 来自 问答

比如一个请求的URL在我的路由里没有匹配的 koa-router会自动返回Not Found 那么我想返回一个统一的404页，该怎么做，在哪里拦截 我使用的ejs模板

11 回复

在正常路由之后放一个输出 404 的路由 … 没找到 Handler 不就是 Not Found 么

@magicdawn 我的意思是指定一个自己写好的静态的ejs 谢谢回答

可以参考这段代码: https://github.com/superalsrk/koa2-boilerplate/blob/master/src/routes/index.js 设置一个default router, 该路由返回404, 返回自定义页面的话可以加个模板引擎, 更简单暴力的方法是直接fs读文件流并返回

ctx.type = 'html’ ctx.body = require(‘fs’).createReadStream(__dirname + ‘/…/public/main.html’)

@hezhongfeng

你都有controller了, 是输出 html 还是 json 不是随你么…

1 
// 404
app.use(async (ctx) => {
  ctx.status = 404
  await ctx.render('common/404')
})

@magicdawn 我会输出 就是不知道在哪输出0.0

@superalsrk @eyblog @magicdawn 谢谢 我现在知道怎么做了 在所有的路由都没有匹配之后，直接设置状态为404，并且返回我的404页面 如果前面有匹配的就轮不到它返回404了，直接会返回相应的页面

@eyblog 你好 麻烦问一下, 除了这种方式, 可以在 路由文件中 进行设定吗? 可以在下面的 index.js 文件中添加吗?

index.js

/**
 * 路由清单列表
 */
const router = require('koa-router')();

// 引入自定义路由 目录
const home = require('./homepage/home');
const login = require('./user/login');
const register = require('./user/register');

router.use('/', home.routes(), home.allowedMethods());                       // 加载首页路由
router.use('/login', login.routes(), login.allowedMethods());                // 加载登录页路由
router.use('/register', register.routes(), register.allowedMethods());       // 加载注册页路由
module.exports = router;

@eyblog 我现在的写法是在app.js中添加的, 按照你的说法

app.js

app.use(async (ctx) => {
  console.log(ctx.status);
  switch (ctx.status) {
    case 404:
      await ctx.render('404');
      break;
    case 500:
      await ctx.render('500');
      break;
  }
})

@hezhongfeng 麻烦问下 500 的友好界面 怎么指定

index.js:

app.use(middleware.catchError);

middleware:

const catchError = async (ctx, next) => {
  try {
    await next();
    if (ctx.status === 404) {
      ctx.throw(404);
    }
  } catch (err) {
    console.error(err.stack);
    const status = err.status || 500;
    ctx.status = status;
    if (status === 404) {
      await ctx.render("errors/404.njk");
    } else if (status === 500) {
      await ctx.render("errors/500.njk");
    }
  }
};

用middleware实现，另外注意这个catchError的放置位置。比较好的做法是放在一些log类middleware之后，session、cache类middleware之前，注意看看koa的洋葱模型就知道了。

回到顶部