前情


最近在项目开发中,跟服务端连调发现接口一直报错,服务端一直提示是数据没有传,而通过浏览器控制台发现数据是有传的。


服务通过postman自测是OK的。经过和服务端一起定位发现服务端只接收以form-data格式传递的数据,而我传递的是JSON对象。

Why?


平时前后端接口数据连调很少有走form-data形式的,form-data一般用来做文件上传才会用到,如果要以form-data传递数据,则需要通过借助FormData对象

解决方案


  1. 跟服务端协商,服务端是否可修改成支持直接传递JSON对象(推荐)
  2. 也可前端直接传递form-data数据给服务端即可,关键代码如下:
let param = new FormData();
param.append('chatGid', '******');
param.append('chatItemGid', '******');
// 注意事项
// 对于传递文件对象,是需要三个参数的,第一个为字段,第二个是二进制文件本体,第三个是文件名
param.append('file', 文件二进对象, 文件名);

问题关联


前后端数据连调有几种常见的数据传递格式,对于不同格式,需要设置不能的Content-Type

  1. text/plain :纯文本格式
  2. application/json: JSON数据格式
  3. application/x-www-form-urlencoded :默认的encType,form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式)
  4. multipart/form-data : 需要在表单中进行文件上传时使用

前后端数据传递之form-data的更多相关文章

  1. Vue nodejs商城项目- 前后端数据传递

    .利用Mongoose查询MongoDB 通过mongoose插件可以简捷地从mondodb中获取数据,首先安装mongoose: cnpm install mongoose --save   使用m ...

  2. 两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

    一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...

  3. vue-resource的使用,前后端数据交互

    vue-resource的使用,前后端数据交互 1:导入vue与vue-resource的js js下载:   https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...

  4. 对GraphQL-BFF:微服务背景下的前后端数据交互方案的研究-------引用

    随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...

  5. web前后端数据交互

    前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...

  6. 【springMVC】简单的前后端数据交流

    最最常见两种,一则返回视图模板(文档),二则为json数据.就使用一个源代码文件来看看springmvc是怎么做到的. 1.UserController.java源代码文件 (这里额外的使用了fast ...

  7. 前后端数据交互处理基于原生JS模板引擎开发

    json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...

  8. SpringMVC参数绑定学习总结【前后端数据参数传递】

    目录 1. 绑定机制 2. 支持的数据类型 3. 参数请求中文乱码解决 4.自定义类型转换器 5.最后参数绑定学习小结 SpringMVC作为Controller层(等价servlet和struts中 ...

  9. 前后端数据交互(八)——请求方法 GET 和 POST 区别

    WEB 开发同学一看 get 和 post 请求方法的区别,第一感觉都是 So easy! 学习ajax.fetch.axios时,发送网络请求携带参数时,都需要分别处理get和post的参数.所以我 ...

  10. 前后端数据交互利器--Protobuf

    Protobuf 介绍 Protocol Buffers(又名 protobuf)是 Google 的语言中立.平台中立.可扩展的结构化数据序列化机制. https://github.com/prot ...

随机推荐

  1. Vue 3.3.11 迁移指南

    https://v3-migration.vuejs.org/zh/ 用于迁移的构建版本 @vue/compat (即"迁移构建版本") 是一个 Vue 3 的构建版本,提供了可配 ...

  2. QT框架实现自定义形状截图效果

    文章目录 QT框架普通截图运行效果 QT框架系统级热键的原理 注册热键 反注册热键 获取系统级唯一的整数ID 删除系统级唯一整数ID 原生事件过滤器 QT框架截图的原理 截图窗口 拉框操作 系统剪切板 ...

  3. [OI] Testlib

    Testlib 是用于实现 SpecialJudge 的一种方式 为了使用 Testlib,你需要在你的文件中引用 Testlib.h testlib.h 下载 使用 Testlib 程序 以 Tes ...

  4. Android USB 整条通知链分析

    以Android13 为例:在Android 13中,USB插入拔出事件的通知链从硬件层到应用层,依次经过硬件.内核.HAL.Framework.以及应用广播等多个模块,整个流程涉及的具体文件和逻辑如 ...

  5. 大模型存储选型 & JuiceFS 在关键环节性能详解

    从去年开始,LLM大语言模型领域发展迅速.如 LLaMA.ChatGLM.Baichuan.Qwen 和 yi-model 等基础模型(Foundation Models)的数量显著增加.众多企业也开 ...

  6. 云原生周刊 | 在 Grafana 中显示 K8s Service 之间的依赖关系

    开源项目推荐 Caretta 这个项目可以在 Grafana 监控面板中显示 K8s Service 之间的依赖关系.底层使用的是 eBPF,对应用无侵入. busuanzi 这是一个基于 Golan ...

  7. Bitmap 和 布隆过滤器傻傻分不清?你这不应该啊

    大家好,我是小富- 有个兄弟私下跟我说,他在面试狗东时,有一道面试题没回答上来:Redis 的Bitmap和布隆过滤器啥区别与关系? 其实就是考小老弟对这两种工具的底层数据结构是否了解,不算太难的题. ...

  8. mysql主从复制详细部署

    1.异步复制:这是MySQL默认的复制模式.在这种模式下,主库在执行完客户端提交的事务后会立即将结果返回给客户端,并不关心从库是否已经接收并处理.这种模式的优点是实现简单,但缺点是如果主库崩溃,已经提 ...

  9. .NET使用OllamaSharp实现大模型推理对话的简单演示

      前提条件:请确保你本地已经安装了ollama以及有关本地离线模型.或者已有远程模型环境等.如果没有,请自行部署.如果需要帮助,可以文末获取联系方式咨询.由于部署离线大模型过于简单,在线资料也很多, ...

  10. Volatility 内存取证基础

    实操 (需要下面这个内存取证的私我)