欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-01-20 21:02:10
...

最近做一个小项目,前端使用 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))
  }

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

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

参数也是正确的

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

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

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

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

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

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

const bodyParser = require('body-parser')

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

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

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

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

相关标签: vue axios Node