uniapp:request 请求出现400错误

简介: uniapp:request 请求出现400错误

uniapp:request 请求出现400错误

开发需求:我们团队在使用 uniapp springboot 开发微信小程序项目,前端向后端发送request 请求时,前端爆出400错误。


image.png

400错误: 请求无效 (Bad request);出现这个请求无效报错说明请求没有进入到后端服务里


原因:前端提交的数据或请求的Url,在后端参数中不能封装或不能处理;前端 uniapp中的uni.request请求中的header 需要编写正确,不然后端拿不到前台的数据,会爆400错误。


解决:需要注意因为发送的是POST请求,所以需要将请求头设置为 ‘content-type’ : ‘application/x-www-form-urlencoded’ 并将method设置为PSOT类型。

uni.request请求中的header需要编写为:


header: {
        "Content-Type": "application/x-www-form-urlencoded"
    }


这里header的书写涉及data 数据说明


我们根据最终发送给服务器的数据是否为 String 类型,进行转换,如果传入的 data 不是 String 类型,会被转换成 String。


转换规则如下:


  • 对于 GET 方法,会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18


  • 对于 POST 方法且 header['content-type']application/json 的数据,会进行 JSON 序列化。


  • 对于 POST 方法且 header['content-type']application/x-www-form-urlencoded 的数据,会将数据转换为 query string。


案例:


uni.request({
    url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    // header: {},设置请求的 header 默认是application/json
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});


相关文章
|
9月前
|
前端开发 API UED
封装 uniapp 请求库的最佳实践
背景 在前端开发中,HTTP 请求是与服务器进行数据交互的核心手段。无论是获取数据还是提交数据,前端应用几乎都离不开 HTTP 请求。在 uniapp 中,uni.request 是官方提供的用于发起 HTTP 请求的基础 API。然而,直接使用 uni.request 存在一些问题和不足,比如: 1. 代码冗余:每次发起请求时都需要编写类似的配置代码,导致代码重复。 2. 缺乏统一管理:没有统一的地方管理请求参数、头信息、错误处理等,使得代码不易维护
374 7
|
前端开发 小程序 Java
uniapp-网络数据请求全教程
这篇文档介绍了如何在uni-app项目中使用第三方包发起网络请求
918 3
|
API
uniApp封装请求
uniApp封装请求
344 0
|
JSON 前端开发 API
新建一个uniapp请求,并且封装request
新建一个uniapp请求,并且封装request
125 1
uniapp 请求接口的方式
uniapp 请求接口的方式
773 1
|
前端开发 JavaScript 小程序
【uniapp】十分钟带你封装uniapp的api请求
【uniapp】十分钟带你封装uniapp的api请求
816 0
|
小程序 开发者
uniapp请求数据出现的问题(避个坑)
uniapp请求数据出现的问题(避个坑)
808 0
|
小程序
uniapp 微信小程序请求拦截器 接口封装
uniapp 微信小程序请求拦截器 接口封装
|
前端开发 API
uniapp封装request请求
uniapp封装request请求
288 0
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
313 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)

热门文章

最新文章