JimQing's Blog


View JimQing's projecton GitHub

关于koa-router的使用

20 Sep 2019

koa-router

Router middleware for koa

Koa的路由,在服务端的路由,通过他可以对前端发出的请求做出响应,并执行对应的方法。

其实更像是服务端的接口,针对该路径的请求返回请求所需的数据。

安装

npm install koa-router

如果要载入配置好的route进入工程中,需在入口处进行’‘注册’‘。

demo举例

在入口文件进行注册

// app.js
const router = require('./router.js');
...
app
    .use(router.routes())
    .use(router.allowedMethods());
...

// 监听当前机器的 3000 端口
app.listen(3000);

新建一个router.js,用于处理router的相关处理

// router.js
const router = require('koa-router')();

// router get方法
router.get('/', (ctx, next) => {
    ctx.body = 'get request from /!';
    console.log('get request from /!');
});

router.get('/test', (ctx, next) => {
    ctx.body = 'get request from /test!';
    console.log('get request from /test!');
    // 通过next走下一个函数
    next();
}, ctx => {
    ctx.body += '。。。 /test2!';
});

// router post方法
router.post('/post', ctx=> {
    ctx.body = 'get request from /post!';
});

同样router也可以使用链式写法,因为router的get方法与post方法同样会返回router本身。

// 链式写法
router
    .get('/', (ctx, next) => {
        ctx.body = 'get request from /!';
        console.log('get request from /!');
    })
    .get('/test', (ctx, next) => {
        ctx.body = 'get request from /test!';
        console.log('get request from /test!');
        // 通过next走下一个函数
        next();
    }, ctx => {
        ctx.body += '。。。 /test2!';
    })
    .post('/post', ctx=> {
        ctx.body = 'get request from /post!';
    });

最后,将这个已经预设好的router对象暴露出来。

module.exports = router; // 暴露router对象

扩展 (设置请求头及允许前端跨域请求)

前端开发阶段需要调后端接口,事实上是跨域的,通过一些跨域工具可以实现跨域。

一般情况下,后端支持跨域的方式即是为前端配置 Access-Control-Allow-Origin , 可配置为 ‘*’ 允许所有跨域。

事实上, 设置为 * 是非常不保险的,真实开发环境是后端开启跨域,前端通过跨域请求访问,而在正式环境是没有跨域问题的。

Access-Control-Allow-Origin 源
Content-Type: application/json;charset=utf-8 默认为json方式, 可能为 formData 模式
Access-Control-Allow-Methods: 支持的请求方式, 如 ‘GET, POST, PUT, OPTIONS’
Access-Control-Allow-Headers: content-type 头
Access-Control-Allow-Credentials: true 支持带cookie跨域

Tips: 这个要单独讲一下, 如果前端需要在跨域请求时带上cookies在头部, 需要满足以下条件:

  1. Access-Control-Allow-Origin 不为 ‘*’
  2. Access-Control-Allow-Credentials 为 ‘true’
  3. 以axios为例 需要设置 withCredentials: true . ajax及其他类似

举例如下

router
    .all('/*', async (ctx, next)=> {
        ctx.set("Access-Control-Allow-Origin", "http://172.22.22.222:8089");
        ctx.set("Content-Type", "application/json;charset=utf-8");
        ctx.set("Access-Control-Allow-Methods", "GET, POST, PUT, OPTIONS");
        ctx.set("Access-Control-Allow-Headers", "content-type");
        ctx.set("Access-Control-Allow-Credentials", "true");
        console.log(ctx.request.method);
        if (ctx.request.method === 'OPTIONS') {
            ctx.status = 200;
        } else {
            await next();
        }
    })
    .get('/', (ctx, next) => {
        ctx.body = {data: 'get request from /!'};
        console.log('get request from /!');
    });

如上述代码所示,在上述所设置的请求下,我们的Koa服务,同意http://172.22.22.222:8089可以跨域,如果遇到options请求直接放行就是了。

这里补充一下:options请求是浏览器判断你的请求为复杂请求,从而发出的一个校验型请求。复杂请求常见为参数为json的POST请求且contentType为applicaiton/json。

在我的跨域详解里边讲解了一些关于复杂请求与简单请求的内容和例子,传送门

router.js 代码段

// router.js
const router = require('koa-router')();

// router get方法
router.get('/', (ctx, next) => {
    ctx.body = 'get request from /!';
    console.log('get request from /!');
});

router.get('/test', (ctx, next) => {
    ctx.body = 'get request from /test!';
    console.log('get request from /test!');
    // 通过next走下一个函数
    next();
}, ctx => {
    ctx.body += '。。。 /test2!';
});

// router post方法
router.post('/post', ctx=> {
    ctx.body = 'get request from /post!';
});

// 链式写法
router
    .get('/', (ctx, next) => {
        ctx.body = 'get request from /!';
        console.log('get request from /!');
    })
    .get('/test', (ctx, next) => {
        ctx.body = 'get request from /test!';
        console.log('get request from /test!');
        // 通过next走下一个函数
        next();
    }, ctx => {
        ctx.body += '。。。 /test2!';
    })
    .post('/post', ctx=> {
        ctx.body = 'get request from /post!';
    });
    
module.exports = router; // 暴露router对象

参考文献/博客

  1. koa-router https://github.com/ZijianHe/koa-router

至此,希望此博客能对你有所帮助。