uniapp:request 请求出现400错误

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

uniapp:request 请求出现400错误

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

1665320974260.jpg

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';
    }
});

谨以此篇纪念我与bug:400的8h


相关文章
|
JSON 前端开发 小程序
uniapp:request 请求出现400错误
uniapp:request 请求出现400错误
595 0
uniapp:request 请求出现400错误
|
29天前
|
JavaScript 前端开发 数据安全/隐私保护
如何使用request-promise在发送请求时使用代理?
以上方法演示了如何在发送请求时使用 `request-promise`结合代理服务,适用于需要通过代理访问网络资源的场景。
26 0
|
2月前
|
NoSQL 前端开发 测试技术
若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
|
3月前
|
前端开发
Request(获取请求数据的)请求转发,response响应数据,将数据反馈给前端
Request(获取请求数据的)请求转发,response响应数据,将数据反馈给前端
|
4月前
|
JSON 中间件 数据格式
在自定义服务器框架中处理 POST 请求
在自定义服务器框架中处理 POST 请求
|
4月前
|
JSON 中间件 数据格式
在服务器框架中处理 POST 请求
在服务器框架中处理 POST 请求
|
10月前
|
JSON 前端开发 API
新建一个uniapp请求,并且封装request
新建一个uniapp请求,并且封装request
31 1
|
10月前
|
前端开发 API
uniapp封装request请求
uniapp封装request请求
64 0
|
11月前
|
JSON 小程序 API
【uniapp小程序】request发起请求
【uniapp小程序】request发起请求
148 0
|
12月前
Cypress 等待某个 HTTP put 请求得到 200 状态码后,再执行下一步的操作代码
Cypress 等待某个 HTTP put 请求得到 200 状态码后,再执行下一步的操作代码