node后端接收到axios的post请求体为空

news2024/9/22 9:54:10

node后端接收到axios的post请求体为空???

请添加图片描述

使用axios发送post请求,传入了Object格式的参数,在node后端req.body接收到的参数为空,但是网页上抓包检查时,发现请求的body确实是携带了参数的?

请添加图片描述

后端使用了express搭建服务器,并使用了cors解决前端请求跨域问题,于是我开始了漫长的debug。首先,我使用中间件,在数据提交到后台时,先在控制台打印一下req.body这个对象

node.js 中部分代码

后端部分代码

vue中部分代码

前端部分代码

显而易见,服务器中req.body请求体中没有任何参数。但是页面确实是提交了数据呀?于是我在页面F12进行网络抓包来查看发出去的request请求

请添加图片描述请添加图片描述

抓到的包中请求体确实携带了页面发送的参数,然后我就开始意识到事情的不对劲了,开始在网上搜索答案。后来,我把问题锁定到了axios请求机制和服务器对请求体数据解析上,之后尝试过在axios请求函数中,在header中配置内容数据格式为’Content-Type’: ‘application/x-www-form-urlencoded’,依然没用。经过漫长的网上冲浪,并查了一下axios的源码,我发现axios的文档上有这样一句话

在这里插入图片描述

这就能解释为什么我之前发obj对象数据,请求体携带的确是json格式的数据,说明axios会自动转换数据为json格式后来我又在源码上看到了转换请求体参数格式的相关代码

请添加图片描述

if(utils.isURLSearchParams(data){ 
  setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded'); 
  return data.tostring(); 
} 
if(utils.isObject(data){ 
  setContentTypeIfUnset(headers, 'application/json;charset=utf-8'); 
  return JSON.stringfy(data); 
}

显然,axios在发送请求时,如果参数对象data不是表单数据格式对象,就会默认把数据转为json字符串,放到请求体中的。所以我之前发过去的obj对象,被axios自动转化为了json字符串,但是将JSON字符串格式的参数发给服务器,应该也没什么问题呀?于是我就重新回到服务器的配置代码上来,显然,应该是服务器无法解析request请求的请求体body中JSON字符串的数据。这让我想到了我最开始配置的这行代码。

// 配置解析 数据格式为表单数据的请求体 的中间件 
app.use(express.urlencoded({ extended: false }))

expres服务器默认无法解析数据格式为表单数据的请求体,因此express才提供了这个中间件,让我们配置,从而能够解析req.body 中表单格式数据。而这个中间件内部,其实是在配置body-parser属性,所以我的每个request请求都是要经过这个过滤器解析的,也就是说,这个中间件不能解析json格式字符串????

经过网上查阅,我找到了如下解释

body-parser的urlencoded方法顾名思义就是把传来的数据当做url来处理,也就是像querystring一样,所以对于传过来的json数据,没有识别到切割key和value的标志,就把所有都当做key来处理

body-parser无法解析请求体中的JSON字符串,所以当收到JSON格式的参数时,因无法解析,所以req.body就为空了

解决:
1:既然body-parser只能解析序列化的表单数据格式,即“?username=username&time=time&textdata=textdata&imgUrl=imgUrl”我们只要将参数对象序列化成表单数据格式,再发送就好了。

这里要用到axios提供的 qs 库,qs是axios自带的一个库
功能:

里面的stringify方法可以将一个json对象直接转为(以?和&符连接的形式)。
在开发中,发送请求的入参大多是一个对象。在发送时,如果该请求为get请求,就需要对参数进行转化。使用该库,就可以自动转化,而不需要手动去拼接,所以我只要将我的参数对象通过qs的stringfy方法转换为表单数据格式,再通过axios发送给服务器,body-parser就能解析成key,value的键值对形式,放入req.body中。

2:在node中配置body-parser可以获取到除formdata之外的数据在这里插入图片描述
3:在node中配置connect-multiparty可以所有数据
在这里插入图片描述

vue中使用axios发送post请求

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/188537.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【工具】2023开年利器,重写收藏逻辑和内置白板应用的Arc浏览器

目录一、为什么你需要一款新的浏览器?二、重写的收藏夹逻辑三、自带笔记和白板的浏览器四、如何获得Arc浏览器一、为什么你需要一款新的浏览器? 人生漫漫,三年混乱。在经历了这些起伏之后,你一定有一个不断进取的决心。 工欲善其…

如何设置将SAP红灯报错改为黄灯(OBA5 更改消息控制 )

在SAP的业务操作中或者后台配置经常遇到SAP校验报红灯的错误导致业务进行不下去。可以通过OBA5 更改消息控制事务修改消息报错类型,例如把红灯报错改为黄灯,这样业务就可以进行下去了。 举两个例子来说明一下如何配置。 目录 例子1:固定资…

【stl -- 内建函数对象】

目录:前言一、仿函数二、算数仿函数三、关系仿函数四、逻辑仿函数总结前言 概念 stl内建了一些仿函数 分类 算数仿函数、 关系仿函数、 逻辑仿函数 用法 这些仿函数所产生的对象,用法和普通函数完全一样; 使用内建仿函数需要包含头文件 一、…

拉伯证券|A股大涨!外资30分钟爆买百亿!汽车股狂飙

在很多利好音讯的轮番影响下,兔年首个交易日,A股迎来大涨。沪指开盘便站上3300点整数关口,尔后继续高位震动。深证成指、创业板指涨势更甚,到午盘涨幅均超1.5%。 外资继续“高调”抢筹。Choice数据显现,今天开盘仅5分…

Maven基础学习——依赖管理

本专栏主要是记录学习完JavaSE后学习JavaWeb部分的一些知识点总结以及遇到的一些问题等,如果刚开始学习Java的小伙伴可以点击下方连接查看专栏 本专栏地址:🔥JavaWeb Java入门篇: 🔥Java基础学习篇 Java进阶学习篇&…

18个 SpringBoot项目中遇到的BUG,你试试

有人说:一个人从1岁活到80岁很平凡,但如果从80岁倒着活,那么一半以上的人都可能不凡。 生活没有捷径,我们踩过的坑都成为了生活的经验,这些经验越早知道,你要走的弯路就会越少。 1.启动项目的时候报错 1.E…

从零到一,臻于至善|网易邮箱基于StarRocks 开发大数据平台的实践

作者:网易邮箱 黄贤康。现任职网易邮件事业部资深数据开发工程师,作为主要开发人员参与网易邮箱大数据平台的建立、优化、重构等工作,并取得相当的成效。他长期从事服务端应用及大数据领域的架构研发工作,对相关领域的底层架构、开…

什么是一站式人力资源管理系统?

首先什么是人力资源管理系统?简单来讲,人力资源管理系统就是帮助企业人力资源部门进行日常管理的辅助工具。人力资源部门通常需要负责企业员工管理的各个方面,无论是招聘,培训,考勤还是薪资绩效,都需要企业…

Jmeter使用手册

Jmeter使用手册Jmeter使用手册1.Jmeter安装教程下载地址Jmeter环境变量配置启动应用实例1.Jmeter安装教程下载地址https://jmeter.apache.org/download_jmeter.cgiJmeter环境变量配置新建变量名称:JMETER_HOME值为:D:\work_tools\apache-jmeter-5.5添加到path:%JMETER_HOME%\bi…

服务器应该如何做好防护以及被攻击之后如何处理

服务器是每个软件运行的基础,也是运行过程中最重要的一部分,所以在运行的过程中,服务器会受到黑客的不法攻击,那么服务器我们应该如何做好防护以防被攻击呢!接下来小蚁君给大家一一讲解。首先可以安装最新的安全补丁&a…

仪表板展示 | DataEase看中国:数据呈现中国能源发展情况

背景介绍 能源是经济发展的基石,能源的供给与人们生活和经济发展息息相关。二十大报告强调:“要积极稳妥推进碳达峰碳中和,立足我国能源资源禀赋,坚持先立后破,有计划分步骤地实施碳达峰行动。深入推进能源革命&#…

Elasticsearch使用篇 - 更新文档

更新的内部机制 注意:实际使用 murmurhash 算法 注意:更新任何一个字段都是全部删除。并发更新操作之间无事务隔离保证,会产生数据错位问题。 更新操作 1、单条覆盖更新 1、覆盖式更新,由客户端完成所有数据的组装,…

35. 实战:Python实现视频去水印(文末源码)

目录 前言 目的 思路 代码实现 1. 请求URL,查看源代码 2. 源代码中没有就去抓包工具 3. 拿到视频源链接,继续检索来源 4. 拿到数据和链接,二进制写入到本地 完整源码 运行效果 总结 前言 我们在刷某短视频平台时,有些…

SpringCloud搭建微服务之Vault密钥管理

1. 概述 Vault是一款管理密钥和保护敏感数据的组件,用于保护、存储和严格控制对令牌、密码、证书和加密密钥的访问,可以使用UI客户端、CLI和HTTP API访问密钥和其他敏感数据。更多详细介绍,可以参阅vault官网 2. Vault下载与安装 本文以wi…

【Python学习笔记】6. Python3 基本数据类型(下)——列表、元组、集合、字典、数据类型转换

前言 本文介绍Python3基本数据类型——列表、元组、集合、字典、数据类型转换。 List(列表) List(列表) 是 Python 中使用最频繁的数据类型。 列表可以完成大多数集合类的数据结构实现。列表中元素的类型可以不相同&#xff0…

MySQL存储结构

数据结构 数据结构可视化:https://www.cs.usfca.edu/~galles/visualization/ 树 二叉树缺点: 单边节点过多时无法提高效率 红黑树: 具有平衡功能的二叉树,解决了单边节点过多导致的效率无法提高的问题,缺点是平衡算法…

移动端 自适应布局方案

文章目录DPRrem布局实现机理优点缺点相关技术方案viewport 布局优点缺点相关技术方案媒体查询等比缩放原理DPR DPR 设备物理像素 / CSS像素 DPR 2 为例,把 4(2x2)个物理像素当一个 CSS 像素使用 rem布局 rem 就是相对于根元素 html 的…

【正点原子FPGA连载】第二十章Linux图形化配置及其原理 摘自【正点原子】DFZU2EG_4EV MPSoC之嵌入式Linux开发指南

1)实验平台:正点原子MPSoC开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id692450874670 3)全套实验源码手册视频下载地址: http://www.openedv.com/thread-340252-1-1.html 第二十章Linux图…

Python获取信用企业的数据

文章目录前言一、需求二、分析三、测试运行前言 本系列文章来源于真实的需求本系列文章仅供学习参考本系列文章你来提我来做 one:Leave a message at the end of the article two:Get wechat contact information 一、需求 需求 URL:https://szxt.zjamr.zj.gov.cn…

如何保持线上安全:你们的个人网络安全指南

在互联网上保持安全的最佳做法。 我们之前写过关于保护你们的加密资产的文章——你们可以在此处查看我们的加密操作安全指南。现在是时候准备一组更通用的提示来帮助你们保持线上安全。我们知道你们可能大部分的购物都是在网上进行的,我们真的不希望你们被黑客攻击。…