目录

前端使用axios发送请求,后端使用RequestParam接收,前端报400附uniapp.request同类解决办法

目录

前端使用axios发送请求,后端使用@RequestParam接收,前端报400(附uniapp.request()同类解决办法)

我的前端使用的是axios发送请求,请求头默认的为

https://i-blog.csdnimg.cn/blog_migrate/1158777bedc3fff024670ba70d7a0944.png

后端使用 https://i-blog.csdnimg.cn/blog_migrate/c38c5bbabb01d32eca9c8333f7e87c54.png 的是 @RequestParam接收参数。

前端发送请求为post。

但是发送请求之后报错400,查了网上主要的解决办法有两种:

1、使用FormData()传参

https://i-blog.csdnimg.cn/blog_migrate/5e0c773231202ae7bd8a14267ced92a3.png

但是我还是报错400。

2、修改请求头

https://i-blog.csdnimg.cn/blog_migrate/300def23f52db38a1562e728759a98e4.png

但是因为我的axios是经过封装的,而且我其他的接口传参还是要用json的请求头,所以修改统一的请求头显然是不行的。

于是我就想,修改统一的请求头不行,那我只修改这一个的呢?

https://i-blog.csdnimg.cn/blog_migrate/3ed2d532f25d593367ae08a13f429458.png 最后成功了!

https://i-blog.csdnimg.cn/blog_migrate/68f53aff41a605f2c5aa24571280193b.png

—————————————————————后续————————————————————

这里我再说一下如果使用的是uniapp遇到相同的问题怎么办。

uniapp的基础是vue,因此uniapp的uni.request()和vue的axios其实有相似之处的。官网给出的解释是:

https://i-blog.csdnimg.cn/blog_migrate/0066639fe78b0891fdf6ea23920fbdc4.png

那么,对于后端使用@RequestParam接收参数的Post请求,如果你是这样写前端请求接口的话就会报错400

https://i-blog.csdnimg.cn/blog_migrate/28855e7d4492a7ae0f506791aac0af96.png

https://i-blog.csdnimg.cn/blog_migrate/caa44fcdbe3a96084b28afa6228bfc68.png

那么怎么办呢?

排查顺序肯定是先从自己身上找问题,先检查前端的请求参数有没有写错,确认无误用postman测试一下接口,如果postman测试成功,那么就是前端请求头格式问题了。做法很简单,就是改前端的请求格式,如果你想自定义每一个请求头的格式,那么你可以这样写:

request.js:

https://i-blog.csdnimg.cn/blog_migrate/d6bb41b5bb85456622361e84b0fe9c4f.png

api.js

https://i-blog.csdnimg.cn/blog_migrate/6ddd3d1af632460464c7a732361aedc9.png

user.vue

https://i-blog.csdnimg.cn/blog_migrate/4ad0ded13af3a0c45590ea71a9d960fb.png

最后请求成功

https://i-blog.csdnimg.cn/blog_migrate/af68aecf7ed36706c1e580be798c6416.png