首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我发出post请求表单react时,我在后端收到一个空的正文。我不明白为什么

当你发出POST请求表单React时,后端收到一个空的正文可能有以下几个可能的原因:

  1. 前端代码问题:首先,你需要确保前端代码中的表单数据正确地被提交到后端。你可以检查前端代码中的表单提交逻辑,确保表单数据被正确地包装成POST请求的正文部分。另外,你还可以使用浏览器的开发者工具来查看网络请求,确认表单数据是否被正确地发送到后端。
  2. 后端代码问题:其次,你需要检查后端代码,确保能够正确地解析POST请求的正文部分。根据你使用的后端框架或语言,可能需要使用相应的解析器或中间件来处理POST请求的正文数据。例如,在Node.js中,你可以使用body-parser中间件来解析POST请求的正文数据。
  3. 请求头问题:还有可能是由于请求头的问题导致后端收到空的正文。你可以检查请求头中的Content-Type字段,确保它正确地指定了请求正文的格式。常见的Content-Type值包括application/json、application/x-www-form-urlencoded等。
  4. 网络传输问题:最后,还有可能是由于网络传输问题导致后端收到空的正文。你可以检查网络连接是否稳定,并确保请求能够正确地到达后端服务器。

综上所述,当你发出POST请求表单React时,后端收到一个空的正文可能是由于前端代码问题、后端代码问题、请求头问题或网络传输问题所致。你可以逐一排查这些可能的原因,以找到问题所在并进行修复。

(注意:本回答中没有提及云计算相关内容,如有需要,请提供相关问题。)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

解决:node后端收到axiospost请求体竟为

前言: 在做项目,你们是否会遇到这样一个问题: 使用axios发送post请求,传入了Object格式参数,node后端req.body接收到参数为,但是网页上抓包检查,发现请求body...今天,写vue+node项目提交登录信息(username,password)到后端,就遇到了这个小bug,花了一个半小时时间,才搞出了个所以然来。...显而易见,服务器中req.body请求体中没有任何参数。但是页面确实是提交了数据呀? 于是页面F12进行网络抓包来查看发出request请求 ? ​...body-parser无法解析请求体中JSON字符串,所以当收到JSON格式参数,因无法解析,所以req.body就为空了 ---- 解决: 既然body-parser只能解析序列化表单数据格式...开发中,发送请求入参大多是一个对象。发送,如果该请求为get请求,就需要对参数进行转化。

7.7K62

React 支持 form action 是作妖?不,它是一种重磅回归

form 元素,内部表单元素可以根据 name 属性与 value 值自动组合成一个完整序列化表单对象。...我们可以先创建一个 FormData 对象,然后通过 append 方法来添加属性。...抛开学习成本不谈,个人认为这是一个非常好变化,新开发方式上开发体验和性能表现上都有非常大提升。...✓这个变化主要是 React 中并不提倡直接获取元素对象,以及直接往后端发送请求方式并不常用 function action(formdata) { // do something } <...5、它对服务端渲染划时代意义 这里大家需要注意一个小细节就是,许多针对表单功能增强 API,都不是从 react 中引入,而是从 react-dom 中引入。 第一还没想通这到底咋回事。

12210

职业是前端工程师【七】:你真的懂前后端分离吗?

觉得它甚是麻烦,当我一个接口时候,需要同时修改两部分代码,以及对应测试。反而,还不如直接修改原有的模板来得简单。 可是当我去使用这个,由前后端分离做成单页面应用时,开始觉得这些是值得。...整个过程里,我们只是不断地从后台去获取数据,不需要重复地请求页面——因为这些页面的模板已经存在本地了,我们所缺少只是实时数据。 后来,当我从架构去考虑这件事才发现这种花费是值得。...而我使用 React ,也不影响后台使用某一个框架。 概念我们已经清楚了,但是还有一个问题:我们真的需要前后端分离吗? 真的需要前后端分离吗? ?...": ""}] 前端一个 API 请求之后,可以直接渲染这些数据成 HTML。...如果一个前端应用只显示数据的话,那么这个应用就没有充足理由,做成一个单页面应用——单页面应用是为了更好交互而存在当我们注册、登录、购买东西,就需要开始与表单进行处理。

1.1K80

剥开比原看代码09:通过dashboard创建密钥,前端数据是如何传到后端?

在前一篇文章中,当我们第一次浏览器中打开dashboard,因为还没有创建过密钥,所以比原会提示我们输入一些别名和密码,为我们创建一个密钥和相应帐户。就是下面这张图所对应:  ?...跟之前一样,我们将对这个问题进行细分,然后各个击破: 前端:当我们填完表单,点了提交以后,比原在前端是如何发送数据后端:比原后端是如何接收到数据?...前端:当我们填完表单,点了提交以后,数据会发送到后端哪个接口? 当我们点击了"Register"按钮,在前端页面中,一定会在某个地方触发一个向比原节点webapi接口发出请求操作。...由于比原前端页面是使用React为主,所以我猜想在代码中,也该会有一个名为Register组件,或者某个表单中有一个名为Register按钮。...当我们清楚了本文中,前后端数据是如何交互,就很容易推广到更多情景。在前端还在很多页面和表单很多地方都需要调用后端接口,相信按照本文思路,应该都可以快速找到。

77410

邮件狂欢:Next.js和Resend SDK电子邮件魔法

下一步是按照以下步骤创建 API 密钥:导航至仪表板左侧API 密钥部分。单击页面右侧“创建 API 密钥”按钮。将出现一个包含表单模式窗口。...toast从库导入react-hot-toast,成功发送电子邮件后显示通知。定义一个名为 异步函数onSubmit来在用户提交表单处理表单提交。...在此函数内,使用 fetch 方法发出 API 请求,该方法将 POST 请求发送到端点, /api/send请求正文表单数据为 JSON。...reset提供功能用于useForm提交后重置表单字段。实施动态电子邮件模板使用 React Email,创建现代电子邮件模板变得非常容易。...该POST函数是一个异步函数,用于处理传入 POST 请求。、和变量是从解析请求正文中提取name。emailmessage现在,导航到项目的主页并在表单字段中输入一些数据。点击“预约”按钮。

1K00

闲聊HTTP

表单只能使用两种方法GET和POST,因为我们是要发送数据,所以需要使用POST方法。 如果客户端向服务器请求某个文件比如main.css呢?        ...Content-Length是必须包含在每个响应报文中响应头字段,它告诉浏览器响应中正文大小。这样浏览器就知道在请求头之后可以接收多少字节,并且在下载文件可以显示有意义进度条。...当我们输入网址,从地址栏中按下 Enter 键到显示网页之间超过 50% 时间都花在等待答案上,这段等待时间称为传送首字节时间,简称 TTFB。...对于 HTTP 来说,连接就像一个队列,当第一个请求正在被处理,所有其他请求都需要等待,这样就浪费了很多时间。...报头设为 keep-alive,服务器成功发出响应后将不会关闭连接,而是允许客户端重复利用已经建立连接来进行其他请求

45210

CSRF原理与防御 | 你想不想来一次CSRF攻击?

你点了一下赢钱按钮,在这个不正规网站中,将会发送https://www.a-bank.com/transfer这个请求发送这个请求时候,会自动带上www.a-bank.comcookie,不要问我为什么是这样...这种方式是表单页面生成一个随机数,这个随机数一定要后端生成,并且对这个随机数进行存储。在前端页面中,对这个Token表单项进行隐藏。...第二种,通过请求头中referer字段判断请求来源。每一个发送给后端请求,在请求头中都会包含一个referer字段,这个字段标识着请求来源。...我们在做后端防御,可以先取出每个请求请求头中referer字段,判断是不是以自己网站域名开头,咱们示例中,如果referer字段是以https://www.a-bank.com/开头,则继续执行转账操作...以上就是后端防御CSRF攻击两种方式,都需要在后端做特殊处理。当然也可以在前端做处理,怎么做呢?我们接着往下看。 前端防御CSRF 既然CSRF攻击危害这么大,为什么不能在前端禁止这种请求呢?

98331

安全开发之 token 那些事

当用户登录,服务器生成一个 token 发送给客户端,客户端把这个 token 存在内存中或者本地,每次请求都带上这个 token,服务器接收到这个 token 并验证合法性,合法即继续执行请求,非法即拦截请求...token 开发中实践 1、前后端混合开发 使用前后端混合开发模式是较为传统开发模式。一般是后端写完功能让前端写样式,前后端共同维护着同一个页面。...] =generateToken(); 一份存入页面中表单页面上所有的表单中加入一个存放 token 隐藏域: ......("token",generateToken(),time()+3600,'','','',true); 同样,当服务端接收到请求,比对 cookie 中 token 和表单 token 是否相等...这是因为攻击者如果要利用 CSRF,构造一个包含恶意请求页面,无论 GET 还是 POST 还是别的请求类型,由于同源策略限制,请求只能由构造 form 表单发出,AJAX 是不支持跨域发送请求

1.7K00

React】945- 你真的用对 useEffect 了吗?

初始状态是一个object,其中hits为一个数组,目前还没有请求后端接口。...我们可以传递一个数组作为useEffect第二个参数,这样就能避免组件更新执行useEffect,只会在组件mount执行。...思路是,先设置这个接口返回值为data=[], 等到数据是再去请求一个接口,即data作为useEffect第二个参数传入。 但是不知道为什么会造成死循环,拿不到我们想要结果。...但这会带来另一个问题:query任何一次变动都会请求后端,这样会带来比较大访问压力。这个时候我们需要引入一个按钮,点击这个按钮再发起请求。...4.3 处理表单 通常,我们不仅会用到上面的输入框和按钮,更多时候是一张表单,所以也可以表单中使用useEffect来处理数据请求,逻辑是相同: function App() { ...

9.6K20

RESTful API接口设计规范与最佳实践

,并返回实体主体 2 POST 向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。...但是这是建立在业务场景规定,查询结果为时候属于异常前提上。 1返回HTTP状态码 200 当我们查询一个资源但是结果为,到底要不要把本次请求视为一个404异常是取决于业务场景。...,那么返回结果自然是,并不能视为一个异常,这时候返回一个200HTTP状态码,然后响应结果里面明确结果是才是正确做法。...最后总结一下这个问题,当请求结果为,是不是属于异常要考虑业务场景,并且这个划分定义也是很有必要,可以避免潜在业务理解偏差导致程序执行逻辑问题,因为如果是一个异常,那么会更早被前端统一异常处理里面的捕获并处理...,有利于前、后端开发人员开发出更健壮系统。

68110

小结HTTP状态码

2xxs状态码 200 OK:请求成功。成功含义取决于HTTP方法: GET:资源已被提取并在消息正文中传输。 HEAD:实体标头位于消息正文中。 POST:描述动作结果资源消息体中传输。...TRACE:消息正文包含服务器收到请求信息。(方法不安全,一般不用) 说到了HTTP方法,可以戳HTTP请求方法这个解析教程来了解一下。...201 Created:请求已经成功,并因此创建了一个资源。这通常是PUT或POST请求之后发送响应。 202 Accepted:请求已经接收到,但是没有响应,没有结果。...如果是复杂请求,那么得到204返回,浏览器有没有接受了这个请求返回,如果没有,要叫后端搞下相关配置了。...与历史上302不同重新发出原始请求不允许更改请求方法。比如,使用POST请求始终就该用POST请求

1.1K20

CORS 完全手册之 CORS 详解

流程会像是这样: 我们要送出POSTrequest到http://localhost:3000/form 浏览器发现是非简单请求,因此先发出一个preflight request 检查response...而最大差别在于非简单请求发送正式request之前,会先发送一个preflight request,如果preflight没有通过,是不会发出正式request。...对于那些古老网站,甚至于是XMLHttpRequest出现之前就存在网站,他们后端没有预期到浏览器能够发出method是DELETE或是PATCHrequest,也没有预期到浏览器会发出content-type...这就是所说相容性,通过预检请求,让早期网站不受到伤害,不接收到预期外request。 而第二点安全性的话,还记得第一篇问过大家问题吗?送出POST request 删除文章那个问题。...跟后端讨论过后,送出表单之后后端会给一个token,前端只要带着这个token去打PATCH /form这个API,就能够编辑刚刚表单内容。

1.5K31

React从入门到放弃,一个关于网页速度故事

如果你从没做过那样工作,千万别去做。我会给那些愿意听我抱怨的人,喋喋不休地讲遇到各种困难。当我开始深入研究前端替代方案发现了 FRP、Flapjax 和 ClojureScript。...新工作中尝试了 React,并在 Clojure 主题峰会(Clojure Cup 2013)期间发现 CLJS 和 React 简直是天作之合。React 为什么这么好呢?...这个库围绕布局和样式有更多特性,但是 XHR 上想法比较少(例如,如果没有表单,很难完成带参数 POST 请求)。而且这个库大多。...当我纠结于对 HTML 片段请求明白了一件事:当我为目录页选择技术路线图,最后选择是“类似 intercooler 小东西”。 那为什么还不行动呢?...指令有明确扩展点 支持对服务器批量请求 更严格属性命名规范(这是观点,但ic-get和ic-post使烦恼:别让改变观点啊!) 负载更小(多亏了没有 jQuery!)

1K20

Web 应用开发进化论

从客户端向 Web 服务器发送请求、从 Web 服务器向客户端发送响应都需要一定时间。 HTTP 请求带有四种基本 HTTP 方法,想在这里处理它们:GET、POST、PUT、DELETE。...这就是为什么在你电脑上开发一个网站,你必须用 URL localhost 打开它,这只意味着你是这个网站本地主机。 我们更改了 URL 路径会发生啥?...可以说,我们拥有单页应用之前,我们一直使用多页应用,因为对于每个页面(例如 /about),都会向 Web 服务器发出一个请求,以请求它所需所有文件。...如果它发生了变化,它会收到一个基于时间戳带有哈希新文件名(例如 table.hash123.js 变为 table.hash765.js )。当浏览器请求具有缓存文件名文件,它会使用缓存版本。...当客户端应用程序浏览器中渲染 Web 应用程序所需一切时,服务器应用程序处理来自客户端读取和写入数据请求。 前端和后端 我们还没有讨论前端和后端这两个术语,因为不想预先添加太多信息。

4.2K10

web技术讲解(web安全入门03)

一、Web 工作机制 为什么学习这节课 我们学习渗透测试这门课程,主要针对 Web 应用,所以对 Web 架构需要一定了解 1.1 网页、网站 么可通过浏览器上网看到精美的页面,一般都是经过浏览器渲染...Web 开发者 Web 服务器后边增加了一个数据库服务器,这些经常变动数据被存进数 据库,可以随时更新。...是一个请求和响应协议。客户端发出请求,服务器端对请求给出回应。...、请求头、请求正文三部分组成 1、请求行:方法,资源路径,协议/版本 方法:GET 资源路径:/php/test/get.php 协议/版本:HTTP/1.1 2、请求头 从请求报文第二行开始到第一个空行为止内容...3、响应正文 服务器返回资源内容,即浏览器接收到 HTML 代码。

75810

前端-不要再问跨域问题了

为了应付面试,每次都随便背几个方案,也不知道为什么要这样干,反正面完就可以扔了,想工作上也不会用到那么多乱七八糟方案。...要掌握跨域,首先要知道为什么会有跨域这个问题出现 确实,我们这种搬砖工人就是为了混口饭吃嘛,好好调个接口告诉跨域了,这种阻碍我们轻松搬砖事情真恶心!为什么会跨域?是谁在搞事情?...为了找到这个问题始作俑者,请点击:浏览器同源策略。 这么官方东西真难懂,没关系,至少你知道了,因为浏览器同源策略导致了跨域,就是浏览器搞事情。 所以,浏览器为什么要搞事情?...没有同源策略限制接口请求一个小小东西叫cookie大家应该知道,一般用来处理登录等场景,目的是让服务端知道谁发出这次请求。...这里通过前端发请求时候增加一个额外headers来触发非简单请求。 ? 后端: // 处理成功失败返回格式工具 const {successBody} = require('..

5.6K10

一文带你看懂 前后端之间图片上传与回显

流在第一次理解时有点难 它们值得有一篇完整文章(或多篇文章)来介绍,基本上,流有点像是数据传送带,每个块都可以进入时被处理。就 HTTP 请求而言,后端会逐位接收请求各个部分。...当我们使用请求上传文件,浏览器将使用流一次发送一个数据。这是因为我们不能一次将整个文件放在请求对象中。multipart/form-data我们直接去打印这个文件请求。...我们应该看到一个包含所有表单字段及其值对象,但对于每个文件输入,我们将看到一个表示上传文件对象,而不是文件本身。...此对象包含各种有用信息,包括其磁盘上路径、名称等这个时候我们需要把他转换为一个FormData 对象这样便于我们给后端传输我们需要传输东西。...相信我这个代码很简洁,就不多说了。我们来看后端代码。

1.5K10

使用antd表格组件实现日程表

image-20201119161505912 需要注意是,CDN引入React和antd,他们是全局暴露了一个对象,使用它内部方法就需要React.xx、antd.xx来访问了。...需求分析 当我收到需求简述后,对其进行了整理: 表格列要展示内容:日期、日程内容(接口动态返回),日程内容列用户可以自己手动增加。...日程内容单元格内容如果为,需要将单元格进行合并,显示一个增加图标,点击增加图标后,打开系统弹窗进行增加操作,操作完成后,渲染内容至刚才点击单元格。...需求确定后,老板给我分了一个后端,跟后端沟通后开发周期估了1周,页面估了2天时间,剩下3天与后端进行数据对接。...:但json数据中有函数,里面的函数会失效没法执行,由于我需要自定义antd表格,json数据中包含了函数,因此不能使用这个方法。

3.6K20

带你认识 flask ajax 异步请求

01 服务端与客户端 迄今为止,遵循传统服务器端模型中,有一个客户端(由用户驱动Web浏览器)向应用服务器发出HTTP请求。...由于做这种分析有点费时,不想每次把帖子呈现给页面重复这项工作。要做提交为帖子设置源语言。检测到语言将被存储post表中。...06 来自服务器 Ajax 将从实现服务器端部分开始。当用户单击动态下方显示翻译链接,将向服务器发出异步HTTP请求。...当我使用Web表单工作不需要查看request.form,因为Flask-WTF可以为工作,但在这种情况下,实际上没有Web表单,所以我必须直接访问数据。...现在要做就是说明一旦这个请求完成并且浏览器接收到响应,想完成事情。JavaScript中没有需要等待事情,一切都是异步。需要做是提供一个回调函数,浏览器收到响应时调用它。

3.7K20
领券