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错误
1023 0
uniapp:request 请求出现400错误
|
移动开发 Android开发 HTML5
uniapp视频播放功能
uniapp视频播放功能
1756 0
|
数据可视化 JavaScript 前端开发
Qt Quick 定时技巧全攻略:从底层原理到高级应用(二)
Qt Quick 定时技巧全攻略:从底层原理到高级应用
680 0
|
前端开发 JavaScript 数据格式
图片URL转file文件(前端+后端node.js)
图片URL转file文件(前端+后端node.js)
|
8月前
|
安全 前端开发 数据安全/隐私保护
CodeBuddy暴改漏洞实录
本文介绍了使用CodeBuddy修复项目漏洞的过程。通过一个包含注册和登录功能的示例项目,展示了如何发现并修复漏洞,如跨域请求测试中暴露管理员权限、高风险信息泄露(如X-Powered-By: Express)及安全头缺失等问题。借助CodeBuddy分析代码后,快速定位并修复了多个漏洞,最终确保项目安全无误。文章还附有修复前后的目录结构对比图,以及前端界面未受影响的验证。总结部分提到CodeBuddy在提升代码安全性方面的价值,并引发对其更多应用场景的思考。
199 3
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
3294 7
|
前端开发 安全 API
跨域请求的常见场景有哪些?
了解这些常见的跨域请求场景,有助于我们更好地理解和处理跨域问题,通过合理的技术手段和配置来实现跨域资源的安全访问和交互。
494 64
|
6月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
148 0
|
11月前
|
机器学习/深度学习 人工智能 搜索推荐
《探秘AI驱动的个性化推荐系统:精准触达用户的科技密码》
在这个信息爆炸的时代,AI驱动的个性化推荐系统应运而生,通过数据收集与处理、构建用户画像、核心算法(协同过滤与基于内容的推荐)及深度学习技术,精准洞察用户需求。它广泛应用于电商、视频平台等领域,提升用户体验和商业效益。尽管面临数据稀疏性、隐私保护等挑战,未来将更加精准、实时并注重用户隐私。
950 1
《探秘AI驱动的个性化推荐系统:精准触达用户的科技密码》
|
存储 资源调度 JavaScript
Vite是什么?怎样使用Vite创建Vue3项目?
Vite是什么?怎样使用Vite创建Vue3项目?
954 0