axios中post请求后台接收不到参数的解释

这篇具有很好参考价值的文章主要介绍了axios中post请求后台接收不到参数的解释。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近在做项目,用axios向后台发送post请求,具体的写法参照官方文档的写法:

// 发送 POST 请求
axios({
  method: 'post',
  url: ‘http://127.0.0.1:3000/login'
  data: {
    username: admin,
    password: admin
  }
}).then((value)=>{
	console.log(value)
})
.catch(reason=>{console.log(reason)});

我发现,其实后台是接收到了post请求,但是一直无法解析我传过去的参数,而且我尝试用postman测试了一下接口,用postman时可以正确传参的,同时,我在后台打印了一下传过去的参数,发现username和password都是undefined,说明是我传参的方式出了问题。

找了很久都没有找到原因,然后我查阅了下网上资料,把传参改成了以下格式:

        let param = new URLSearchParams()
        param.append('username', 'admin')
        param.append('password','admin')
        axios({
            method: 'post',
            url: "http://127.0.0.1:3000/login",
            data: param
        })
            .then((result) => { console.log(result) })
            .catch((reason) => { console.log(reason) })
    };

这个时候,发现后台已经可以接收到参数了。

查阅了下文档,发现:

  • axios的get请求都是把参数放在params属性下,在post请求下有两种方法,一种是放在params属性中,适合传参较少且数据较简单的情况,另外一种是放在data属性中,如果传参中含有引号、等号、拼接的json串或传参的数据量较大时候使用;
  • 源码是这样的:
//如果是带&&的参数的格式转成String
if(utils.isURLSearchParams(data){ 
  setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded'); 
  return data.tostring(); 
} 
//如果是object对象转成json格式
if(utils.isObject(data){ 
  setContentTypeIfUnset(headers, 'application/json;charset=utf-8'); 
  return JSON.stringfy(data); 
}
  • 我想起之前后台的服务器的配置,node后台一般会配置中间件解析数据,包含两种方式:
app.use(express.urlencoded({extended: true})) // 请求体参数是: name=tom&pwd=123
app.use(express.json()) // 请求体参数是json结构: {name: tom, pwd: 123}

看到这里就豁然开朗了,post请求的两种数据格式要和后台的解析方式相对应,如果后台固定了,就可以通过前端js代码对数据格式进行转换

这个bug当时找了蛮久,关键是要知道出错的根本原因,才知道后面遇到类似的问题如果解决。文章来源地址https://www.toymoban.com/news/detail-518090.html

到了这里,关于axios中post请求后台接收不到参数的解释的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringBoot - Post请求-接收参数

    1、下面样例 Controller 接收 form-data 格式的 POST 数据: 2、下面是一个简单的测试样例: 1 、如果没有传递参数   Controller   将会报错,这个同样有如下两种解决办法: 使用  required = false  标注参数是非必须的。 使用   defaultValue   给参数指定个默认值。 2、下面是一个简

    2024年02月08日
    浏览(73)
  • nodejs接收post请求的参数

    post请求参数不直接在url路径中拼接,而是放在请求体中发送给服务器 请求三要素:请求行、请求头、请求体 post请求参数不能直接在url路径中拼接,所以一般使用ajax请求来发送post请求参数 通常都是提交form表单数据使用post请求 1.2-服务端接收post请求参数的方式 与get请求不同

    2024年02月02日
    浏览(24)
  • 因为axios请求后端,接收不到token的问引出的问题

    相关概念 什么是跨域? 跨域指的是在浏览器环境下,当发起请求的域(或者网站)与请求的资源所在的域之间存在协议、主机或端口中的任何一个条件不同的情况。换句话说,只要协议、主机或端口中有一个不同,就会被认为是跨域请求。 具体来说,以下情况都属于跨域请

    2024年02月10日
    浏览(33)
  • Http中post/get请求参数接收

    Http请求报文示例图如下:   ①是请求方法,GET和POST是最常见的HTTP方法,除此以外还包括DELETE、HEAD、OPTIONS、PUT、TRACE。不过,当前的大多数浏览器只支持GET和POST,Spring 3.0提供了一个HiddenHttpMethodFilter,允许通过_method的表单参数指定这些特殊的HTTP方法(实际上还是通过POST提

    2024年01月25日
    浏览(61)
  • @PathVariable、@PathParam、@RequestBody接收axios传递的请求参数;后端接收前端传递过来的参数

    目录 一、前言 :Content-Type 类型    (1)、 application/x-www-form-urlencoded 类型 (2)、application/json 类型 二、@PathVariable 二、@PathParam  三、@RequestBody  四、后端发送数据给前端 五、注意事项         请求参数以key-value的形式传输         请求参数以JOSN串的形式传输         ax

    2024年01月18日
    浏览(37)
  • vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法

    axios封装-我常用的请求头参数  application/json; charset=utf-8 页面登录请求-post 网络请求正常传入参数 后端代码,查看控制台发现都为null,没取到值。 1.尝试将前端post请求改成get,其他都不用变 发现正常取到值,打印输出正常。前端页面正常跳转。 2.后端设置为post请求,前端a

    2024年02月02日
    浏览(35)
  • axios的put/post请求携带一个string 类型的参数, 前端代码和后端接收方法

    使用axios发送post请求, 后端支持接收单个字段 想要让后端支持接收单个字段,前端就必须是 FormData 格式或 x-www-form-urlencoded 格式,所以参数对象就不能是简单的js对象了,具体代码如下: 后端使用@RequestParam注解接收。 使用axios发送post请求, 后端整体接收json对象 前端代码 da

    2024年02月07日
    浏览(54)
  • Axios post请求出现500错误

    笔者在编写前端form表单传后端数据的时候,出现了以下问题 当我用axios发送post请求的时候,出现了500错误 笔者找了很长时间错误,代码没问题,后端接口也没问题, 后来发现问题出在实体类上了 当前端post请求调后端接口时候,后端控制台打印如下错误 看到错误提示说无法

    2024年02月07日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包