前后端数据传递之form-data
前情
最近在项目开发中,跟服务端连调发现接口一直报错,服务端一直提示是数据没有传,而通过浏览器控制台发现数据是有传的。
坑
服务通过postman自测是OK的。经过和服务端一起定位发现服务端只接收以form-data格式传递的数据,而我传递的是JSON对象。

Why?
平时前后端接口数据连调很少有走form-data形式的,form-data一般用来做文件上传才会用到,如果要以form-data传递数据,则需要通过借助FormData对象
解决方案
- 跟服务端协商,服务端是否可修改成支持直接传递JSON对象(推荐)
- 也可前端直接传递form-data数据给服务端即可,关键代码如下:
let param = new FormData();
param.append('chatGid', '******');
param.append('chatItemGid', '******');
// 注意事项
// 对于传递文件对象,是需要三个参数的,第一个为字段,第二个是二进制文件本体,第三个是文件名
param.append('file', 文件二进对象, 文件名);
问题关联
前后端数据连调有几种常见的数据传递格式,对于不同格式,需要设置不能的Content-Type
- text/plain :纯文本格式
- application/json: JSON数据格式
- application/x-www-form-urlencoded :默认的encType,form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式)
- multipart/form-data : 需要在表单中进行文件上传时使用
前后端数据传递之form-data的更多相关文章
- Vue nodejs商城项目- 前后端数据传递
.利用Mongoose查询MongoDB 通过mongoose插件可以简捷地从mondodb中获取数据,首先安装mongoose: cnpm install mongoose --save 使用m ...
- 两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)
一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...
- vue-resource的使用,前后端数据交互
vue-resource的使用,前后端数据交互 1:导入vue与vue-resource的js js下载: https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...
- 对GraphQL-BFF:微服务背景下的前后端数据交互方案的研究-------引用
随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...
- web前后端数据交互
前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...
- 【springMVC】简单的前后端数据交流
最最常见两种,一则返回视图模板(文档),二则为json数据.就使用一个源代码文件来看看springmvc是怎么做到的. 1.UserController.java源代码文件 (这里额外的使用了fast ...
- 前后端数据交互处理基于原生JS模板引擎开发
json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...
- SpringMVC参数绑定学习总结【前后端数据参数传递】
目录 1. 绑定机制 2. 支持的数据类型 3. 参数请求中文乱码解决 4.自定义类型转换器 5.最后参数绑定学习小结 SpringMVC作为Controller层(等价servlet和struts中 ...
- 前后端数据交互(八)——请求方法 GET 和 POST 区别
WEB 开发同学一看 get 和 post 请求方法的区别,第一感觉都是 So easy! 学习ajax.fetch.axios时,发送网络请求携带参数时,都需要分别处理get和post的参数.所以我 ...
- 前后端数据交互利器--Protobuf
Protobuf 介绍 Protocol Buffers(又名 protobuf)是 Google 的语言中立.平台中立.可扩展的结构化数据序列化机制. https://github.com/prot ...
随机推荐
- 火山引擎数智平台:高性能ChatBI的技术解读和落地实践
导读:大模型能力的发展和成熟,催生出新一代智能化 BI-- ChatBI,即通过自然语言处理(NLP)与大型语言模型(LLMs)的结合,极大简化数据分析过程,提高效率并降低分析门槛.火山引擎数智平台旗 ...
- C++ 指针基础
指针 指针具有强大的能力,其本质是协助程序员完成内存的直接操作 指针: 特定类型数据在内存中的存储地址,即内存地址 指针只是一个逻辑概念,其实际应用是:指针变量 语法 * 符号有两种含义: 声明时:* ...
- 简单上手 Vue Router
Vue Router 也随着 Vue3 的更新来到了 4 版本,来看一下怎么使用吧!(这里使用的是 composition API 和 TypeScript 模式) 安装 vue-router4 np ...
- Phpstorm 插件
Symfony Plugin - 支持 Symfony 2,3,4 ...Laravel Plugin - 支持 Laravel.env files support - 支持.env 文件BashSu ...
- 高通dump ftrace & kernelshark使用
简介 高通 ramdump 可以解析出 ftrace,方便用于追踪 快省稳 问题. kernelshark 是一个可以查看 trace event 的图形化工具,方便梳理和观察内核微观行为. trac ...
- Python | os.path.join() method
Python中的os.path.join()方法可以连接一个或多个路径组件. 此方法将各个路径组成部分,与每个非空部分路径组成部分恰好用一个目录分隔符(" /")连接起来. 如果要 ...
- 2023年1月中国数据库排行榜:OceanBase 持续两月登顶,前四甲青云直上开新局
一元复始,万象更新. 国产数据库在经历过耕获菑畲的一年后,产品.生态.人才队伍建设等都取得了重大的进展.2023年1月 墨天轮中国数据库流行度排行 火热出炉,本月排行榜"属性"列新 ...
- 安装完Oracle数据库后需要调整的参数
关闭审计 alter system set audit_trail = none scope=spfile; 180天密码过期 alter profile default limit PASSWORD ...
- KubeSphere 部署 Kafka 集群实战指南
本文档将详细阐述如何利用 Helm 这一强大的工具,快速而高效地在 K8s 集群上安装并配置一个 Kafka 集群. 实战服务器配置(架构 1:1 复刻小规模生产环境,配置略有不同) 主机名 IP C ...
- ARM 版 OpenEuler 22.03 部署 KubeSphere v3.4.0 不完全指南续篇
作者:运维有术 前言 知识点 定级:入门级 KubeKey 安装部署 ARM 版 KubeSphere 和 Kubernetes ARM 版 KubeSphere 和 Kubernetes 常见问题 ...