周日有个小伙加我,帮他排查了一下问题。正好记录一下。
前端是:axios
后台是:koa2
问题:axios
发 post
请求不携带参数请求正常,携带参数就无响应。
因为我也不知道小伙那些说的是真的,那些是假的,那我们就一点一点排查,我大致定位问题为以下几个方向。
- 参数携带不正确,axios 发过去的数据是错的,比如说被
{id: 1}
却发送的[object Object]
- 参数携带不正确,比如说后台只接收
appliction/json
、application/x-www-form-urlencoded
、multipart/form-data
其中一种
这流程没毛病吧,先找前端自身问题,没问题就出去怼人。
排查问题
前端请求数据排查
因为不知道小伙水平,就没看 network
。我让他直接请求我的接口 https://www.lilnong.top/cors/koa-sf
,然后让他截图。
发现数据被收到了,证明前端肯定是没问题的。
服务端排查
路由排查
开始我怀疑他路由配置有问题。看上去这个路由也没问题。有请求就应该能收到。
content-type 限制排查
原生的话,就是监听流,然后拼接。
new Promise(function(resolve){
let str = ''
ctx.req.on('data', (data) => {
str += data
})
ctx.req.addListener('end', () => {
resolve(str)
})
})
中间件的话,就是 koa-body
和 koa-bodyparser
之类的,通过小伙的截图看到如下画面。支持多种类型,起来也没问题。
其他中间件排查
因为小伙是新手嘛,总有可能用一些奇奇怪怪的中间件,看看是不是有什么检查阻塞了请求。
这张图片上就有疑点了,使用了两个中间件都是处理 body 的。
app.use(bodyParser())
app.use(KoaBody())
用关键词一搜索,妥妥的 BUG 呀。那我们把 app.use(bodyParser())
一删就 OK 了。
起服务,刷页面,测试,OK。
为什么 koa-bodyparser
和 koa-body
一起使用会有问题
感兴趣的小伙伴可以去看看源码。
这两个库都依赖 co-body
这个库,这个库里面依赖 raw-body
。然后下图可以看到,使用的还是流。
微信公众号:前端linong
总结
- 不要同时使用
koa-bodyparser
和koa-body
- 串行读取两次流的数据会怎么样呢?留个课后作业吧。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。