The front-end uses axios to send requests, the back-end uses @RequestParam to receive, and the front-end reports 400 (with uniapp.request() similar solutions)

My front end uses axios to send requests, and the default request header is

The backend uses @RequestParam to receive parameters.

The front end sends the request as post.

But after sending the request, an error 400 is reported. There are two main solutions on the Internet:

1. Use FormData() to pass parameters

 But I still report error 400.

2. Modify the request header

But because my axios is encapsulated, and I still need to use the json request header for other interface parameters, it is obviously impossible to modify the unified request header.

So I thought, it’s not enough to modify the unified request header, so what if I only modify this one?

Finally it worked!

——————————————————————— Follow-up————————————— —————

Here I will talk about what to do if you encounter the same problem when using uniapp.

The basis of uniapp is vue, so uni.request() of uniapp and axios of vue are actually similar. The explanation given on the official website is:

Then, for the Post request that the backend uses @RequestParam to receive parameters, if you write the front-end request interface like this, it will report an error 400

So what to do?

The order of troubleshooting must be to find the problem from yourself first, first check whether the request parameters of the front end are wrongly written, and confirm that there are no mistakes. Use postman to test the interface. If the postman test is successful, then it is a problem with the format of the front-end request header. The method is very simple, which is to change the request format of the front end. If you want to customize the format of each request header, you can write like this:

request.js:

api.js

 user.vue

 

 The last request was successful

Guess you like

Origin blog.csdn.net/CJB2020818/article/details/130029077