koa2数据请求相关问题解决方案汇总

前端请求后端数据,难免会遇到如下几个问题:

1⃣️跨域

2⃣️post/get,其中post请求的方式又分为多种

3⃣️后端数据返回格式(上一篇已经有讨论过,这里不再赘述)

用koa2的话,如何解决这些问题呢?

一、跨域

前端项目跑在localhost:8080,后端服务跑在localhost:1996

这里使用跨域中间件就能解决上述跨域问题

二、post请求数据解析的问题

期间使用了koa-bodyparse中间件,但是对于表单数据,不能解析,还要依赖其他中间件;

后来发现koa-body中间件可以解析所有类型的post请求,包括通过表单提交的文件(后续有bug)

koaBody函数里面的参数是用来配置文件上传的.

app.js:

需要注意的是,onFileBegin函数里面对文件名做了处理(保持原有文件名),如果不处理的话,默认上传文件的文件名将会是这样:

配置好koa-body中间件之后,下面来测试一下(使用了自定义的formatresponse中间件来格式化响应数据):

2.1 get

get请求后台通过ctx.query获取请求参数

2.2 post_multipart/form-data

 

根据之前koaBody中间件的设置,该请求携带的文件已经上传到指定文件夹了.

2.3 post_application/json

后台通过ctx.request.body获取请求参数

哦嚯,跨域?不是已经设置的跨域么?

后来经过多方查阅,好像别人用 koa-body 都没有出现这个问题,只有我用的时候出了这个bug?

最终解决方案:

全局使用(app.js)

app.use(bodyParser())

在文件上传的接口上单独使用(home.js)

const koaBody = require('koa-body');
const path = require('path')

var uploadConfig =  koaBody({
    multipart:true, // 支持文件上传
    encoding:'gzip',
    json:true,
    formidable:{
      uploadDir:path.join(path.resolve(__dirname, '..'),'public/upload/'), // 设置文件上传目录
      keepExtensions: true,    // 保持文件的后缀
      maxFieldsSize:2 * 1024 * 1024, // 文件上传大小
      onFileBegin:(name,file) => { // 文件上传前的设置
        // console.log(`name: ${name}`);
        // console.log(file);
        // 最终要保存到的文件夹目录
        const dir = path.join(path.resolve(__dirname, '..'),`public/upload/`);
        // 重新覆盖 file.path 属性
        file.path = `${dir}/${file.name}`;
      },
    }
  })

home.post('/upload',uploadConfig,async (ctx) => {
    //获取post请求数据
    var files = ctx.request.files;
    var data = ctx.request.body;
    response.success(ctx,'文件上传成功!');
})

这样的话,非文件上传的post请求会走koa-bodyparser中间件,与全局的koa2-cors中间件不会冲突;

文件上传的接口走完koa-bodyparser和koa2-cors之后,到接口内部通过koa-body中间件来解析数据(包括文件).

注:另外还有koa-better-body中间件,我没测试,不知道是不是能够解决和koa2-cors中间件的冲突问题和支持文件上传.