Axios Post 请求后端接收不到数据

最近做一个小项目,前端使用 axios 请求数据,后端使用 node 写接口。调试时发现后端取不到请求的参数,解决时浪费了很多时间,这里贴出来解决方法。

项目地址在这里:html-edit-npm
可以查看相关实现

前端请求,有两个地方需要注意。

首先是需要使用 URLSearchParams 处理 Post 参数。
第二个地方是,Content-Type 的值必须为 application/x-www-form-urlencoded,否则会出现问题。

add () {
    let params = new URLSearchParams()

    params.append('html', JSON.stringify(this.html))

    // 当 http 请求头参数不对时需设置 Content-Type
    axios.post('/api/add', params, {headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}).then((res) => res).catch(err => console.log(err))
  }

这时候发起请求,发现请求是没有问题的

这里写图片描述

参数也是正确的

这里写图片描述

但是后端却还是没有获取到参数

apiRoutes.post('/add', (req, res) => {
  // 获取 post 请求的参数
  const query = req.body
  console.log('body', req.body)

  return res.json({
    code: 0,
    message: "success"
  })
})

这里写图片描述

这里后端也需要做一下处理才能接收到参数

const bodyParser = require('body-parser')

app.use(bodyParser.urlencoded({
  extended: false
}))

这里写图片描述

然后请求就可以正确接收到参数了

这里写图片描述

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页