koa2數據請求相關問題解決方案彙總

前端請求後端數據,不免會遇到以下幾個問題:

1⃣️跨域

2⃣️post/get,其中post請求的方式又分爲多種

3⃣️後端數據返回格式(上一篇已經有討論過,這裏再也不贅述)

用koa2的話,如何解決這些問題呢?

1、跨域

前端項目跑在localhost:8080,後端服務跑在localhost:1996

這裏使用跨域中間件就能解決上述跨域問題

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