2

周日有个小伙加我,帮他排查了一下问题。正好记录一下。

前端是:axios
后台是:koa2
问题:axiospost 请求不携带参数请求正常,携带参数就无响应。

因为我也不知道小伙那些说的是真的,那些是假的,那我们就一点一点排查,我大致定位问题为以下几个方向。

  1. 参数携带不正确,axios 发过去的数据是错的,比如说被 {id: 1} 却发送的 [object Object]
  2. 参数携带不正确,比如说后台只接收 appliction/jsonapplication/x-www-form-urlencodedmultipart/form-data 其中一种

这流程没毛病吧,先找前端自身问题,没问题就出去怼人

排查问题

前端请求数据排查

因为不知道小伙水平,就没看 network。我让他直接请求我的接口 https://www.lilnong.top/cors/koa-sf,然后让他截图。
发现数据被收到了,证明前端肯定是没问题的
image.png

服务端排查

路由排查

开始我怀疑他路由配置有问题。看上去这个路由也没问题。有请求就应该能收到。
image.png

content-type 限制排查

原生的话,就是监听流,然后拼接。

new Promise(function(resolve){
    let str = ''
    ctx.req.on('data', (data) => {
        str += data
    })
    ctx.req.addListener('end', () => {
        resolve(str)
    })
})

中间件的话,就是 koa-bodykoa-bodyparser 之类的,通过小伙的截图看到如下画面。支持多种类型,起来也没问题。
image.png

其他中间件排查

因为小伙是新手嘛,总有可能用一些奇奇怪怪的中间件,看看是不是有什么检查阻塞了请求

image.png

这张图片上就有疑点了,使用了两个中间件都是处理 body 的。

app.use(bodyParser())
app.use(KoaBody())

用关键词一搜索,妥妥的 BUG 呀。那我们把 app.use(bodyParser()) 一删就 OK 了。

image.png

起服务,刷页面,测试,OK。

为什么 koa-bodyparserkoa-body 一起使用会有问题

感兴趣的小伙伴可以去看看源码。

这两个库都依赖 co-body 这个库,这个库里面依赖 raw-body。然后下图可以看到,使用的还是流。

image.png

微信公众号:前端linong

clipboard.png

总结

  1. 不要同时使用 koa-bodyparserkoa-body
  2. 串行读取两次流的数据会怎么样呢?留个课后作业吧。

linong
29.2k 声望9.5k 粉丝

Read-Search-Ask