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中間件的沖突問題和支持文件上傳.