发送请求的时候如何将Request Payload转换为Form Data格式

最新推荐文章于 2023-08-29 10:29:41 发布
最新推荐文章于 2023-08-29 10:29:41 发布
阅读量3.1k 收藏 8
点赞数 2
分类专栏： javascript日常总结 文章标签： 前端 react.js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41880073/article/details/123135288
版权

发送请求的时候如何将Request Payload转换为Form Data格式

一、问题描述

最近做项目遇到了一个问题，前端利用封装好的axios发一个请求给后端，请求可以发送成功，但拿不到正确的数据，在swagger上测试接口拿到的数据和在chorme控制台测试拿到的数据不一样，通过仔细比较，发现控制台payload下一个是Form Data，另一个是Request Payload，所以我想问题就在这里。

如下图，正确的方式
在这里插入图片描述
错误的方式
在这里插入图片描述
再看一下有问题的代码，只列举主要地方

看一下封装的接口请求函数
在这里插入图片描述
看一下，请求时传的参数
在这里插入图片描述

二、问题解决

那么既然知道了问题所在，现在就是想办法将Request Payload转换为Form Data格式

解决办法就是加一个headers: { "content-type": "application/x-www-form-urlencoded" },

在这里插入图片描述
然后现在看一下，控制台payload显示什么
在这里插入图片描述
好了，已经变成Form Data格式了，但是仔细观察，现在这样的情况，传的参数使用对象包裹着的，而正确的做法是不用对象包裹，如图
在这里插入图片描述

那么接受下来就是想办法，不用对象包裹，解决办法是，不能常规的封装成一个对象作为参数传进去，而是必须要Form Data格式的数据了，使用formData包裹数据

正确的代码如下
在这里插入图片描述
现在再看一下payload下的内容
在这里插入图片描述
现在这样的结果就和swagger上测试的一模一样了，并且拿到的数据也是正确的

丑小鸭变黑天鹅
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法
08-28
主要介绍了Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法,结合实例形式详细分析了post数据发送及获取请求数据的原理与相关操作注意事项,需要的朋友可以参考下
VUE 之Request Payload 和from Data
blocalhost的博客
03-27 3126
最近用vue做项目使用axios发送post请求时遇到了前端传数据后端接收不到的情况： 代码： image.png 后来仔细对比ajax发现axios传值是这样的： image.png 而ajax传值是这样的： image.png 一个Request Payload，一个Form Data。 将Request Payload 转为Form Data...
Request Payload 转为 Form Data
nico2333的博客
02-26 6037
最近学reatc写前端，从ajax改用axios，出现后端无法识别传输的数据类型的问题。 看了一下请求头，发现曾经的 Form Data 现在变成了 Request Payload。 此时的axios部分代码为以下： 经查阅，只需要在axios的配置选项中加入一行 headers: {'content-type': 'application/x-www-form...
angularjs中$http模块POST请求request payload转form data
李登辉的博客
01-27 3430
这是我后台SpringMVC控制器接收isform参数的方法，只是简单的打出它的值： ? 1 2 3 4 5 6 7 8 @RequestMapping(method = RequestMethod.POST)     @ResponseBody     public Map sa
解决axios报错400:Request Payload 转为 Form Data，并将对象内元素拆出
furfur-jiang的博客
04-29 620
问题：请求的数据格式与后台要求的不匹配 思路：axios对比用jq的请求是成功的 axios请求： jq请求： 首先发现Request Payload和Form Data不同 解决：增加请求头 this.$http({ method: "post", url: "/login/xxx", data: this.ruleForm, headers: { "content-type": "application/x-www-form-urlencoded" }, }).then((
前端利用formData格式进行数据上传
LQ271524的博客
07-12 9837
contentType 常见的格式 text/plain ：纯文本格式 application/json： JSON数据格式 application/x-www-form-urlencoded中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式） multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格 一. json格式传递 fetch(url, { method: 'POST', // or 'PUT' b
axios把post的RequestPayload格式转为formdata
GeniusXYT的博客
03-26 1082
方法一：配置transformRequest，缺点：其他请求格式的数据也会被重新格式话 const service = axios.create({ //设置axios为form-data 方法1 // headers: { // post: { // "Content-Type": "application/x-www-form-urlencoded" // }, // get: { // "C
Request Payload 转 FormData
weixin_45999514的博客
11-27 503
import request from '@/utils/request' export function login(data) { return request({ url: '/admin/user/login', method: 'post', headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, transformRequest: [
关于使用将axios的请求参数Request Payload格式修改为Form Data格式
zxzy
05-04 3289
关于使用axios如何设置formData提交数据欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导...
前端传参Request Payload改为Form Data
最新发布
m0_61585720的博客
08-29 288
【代码】前端传参Request Payload改为Form Data。
Python爬虫:Request Payload和Form Data的简单区别说明
09-16
主要介绍了Python爬虫:Request Payload和Form Data的简单区别说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
python爬虫实现POST request payload形式的请求
12-20
最近在爬取某个站点时，发现在POST数据时，使用的数据格式是request payload，有别于之前常见的 POST数据格式（Form data）。而使用Form data数据的提交方式时，无法提交成功。 1.1. Http请求中Form Data 和 ...
POST方法发送payload形式的请求1
08-03
背景在爬取某些站点时，会发现在 POST 数据时，使用的数据格式是 request payload，有别于之前常见的 Form data 数据格式。使用 For
前端开发遇到Uncaught SyntaxError: Invalid regular expression flags
热门推荐
丑小鸭变黑天鹅的博客
03-17 2万+
前端开发遇到Uncaught SyntaxError: Invalid regular expression flags 最近做一个项目遇到了这个问题 Uncaught SyntaxError: Invalid regular expression flags 未捕获的语法错误：正则表达式标志无效 出现这个问题大概是因为你引号用错了，也可能是别的没有写对，是小问题，回头仔细检查一下就可以了。我出现这个问题就是因为一个url的地址没有加引号造成的，如果引号嵌套使用出现错误也可能报这个错，一定要注意js引号嵌
Uncaught SyntaxError: Unexpected end of input
丑小鸭变黑天鹅的博客
08-26 1万+
Uncaught SyntaxError: Unexpected end of input 最近做项目遇到这样一个问题Uncaught SyntaxError: Unexpected end of input Unexpected end of input 可以翻译为 “意外的终止输入” 它通常表示浏览器在读取我们的javascript代码时，碰到了不可预知的错误，导致浏览器无法进行下面的解析 遇到这样的问题，首先应该检查下面这些情况，我就是因为少写了一个括号导致出错 一般“ ”（双引号）， ‘ ’（单引
关闭浏览器窗口的时候，如何清空localStorage的数据
丑小鸭变黑天鹅的博客
02-18 1万+
关闭浏览器窗口的时候，如何清空localStorage的数据一、对于单页面应用，例如vue等二、对于多页面应用1、第一种方案（对于vue）2、第二种方案（对于原生js） 一、对于单页面应用，例如vue等 将window.onbeforeunload监听的方法放在App.vue <template> <div id="main" class="app-main"> <router-view></router-view> </div>
数组去重以及数组对象去重方法总结
丑小鸭变黑天鹅的博客
05-09 5291
数组去重以及数组对象去重方法总结一、数组对象去重1、reduce方法2、利用原生js+空对象+空数组3、利用原生js+标志位+空数组4、利用双指针思想+splice方法二、数组去重1、利用新数组+标志位2、排序+新数组+相邻比较3、新对象+新数组4、新数组+indexOf5、新数组+includes6、新数组+filter+includes7、新数组+foreach+includes8、 双指针思想+splice9、新数组+lastIndexOf10、ES6的set 方法 一、数组对象去重 1、reduce
做前端项目遇到的一些问题及解决办法
丑小鸭变黑天鹅的博客
02-18 4449
前端开发遇到的一些问题一、怎样才能让select里的内容居中显示？二、点击一个select里面的一个option，向另一个select添加一组option用js怎么实现？三、点击select里不同的option时如何显示不同的内容（文本、表格、echarts图表等）？ 一、怎样才能让select里的内容居中显示？ 最近在做一个可视化项目，有一个下拉菜单，很基本的一个居中显示居然把我难住了。 最开始的想法使用text-align:center这个方法行不通。然后又试了padding，这个效果不是很好，并不能让
jQuery实现遮罩层功能
丑小鸭变黑天鹅的博客
03-31 3501
jQuery实现遮罩层功能 我们做项目的时候，有一种效果会经常使用到，就是遮罩层，当我们点击某个按钮时，希望动态弹出一个输入块，并且想要他的背景是透明的，而要输入的块不透明，效果如下 那么这个效果怎么实现呢，阿飞给你一一道来。 思路： 我们需要一个最外层div去做透明背景，然后需要一个div去做输入块。总的来说就是这两层div。 起初我们都设置其为display:none，然后通过js代码实现，当点击的时候让其显示 大概思路就是这样，接下来直接上代码 html代码 <div class="mask"
request payload转为form data
03-16
将request payload转换为form data的方法如下： 1. 首先，需要将request payload中的数据解析出来，可以使用JSON.parse()方法将其转换为JSON对象。 2. 然后，需要将JSON对象中的数据转换为form data格式。可以使用URLSearchParams对象来实现这一步骤。 3. 最后，将转换后的form data作为请求体发送给服务器即可。 需要注意的是，如果request payload中包含文件等二进制数据，无法直接转换为form data格式，需要使用multipart/form-data格式发送请求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值