What happened

Ah, well, recently I learned to use Vue framework to build the foreground module, but I had a problem when I tried to use Axios to make asynchronous requests when interacting with the background. The debugging mode of the browser kept giving me error codes:400

At first, I thought it was the background problem, but I used postman to request this interface, found that there is a return value, indicating that the problem is not on the interface.

So the question is, since the background interface is excluded, could it be the Axios problem? This is because the front-end page would have received these parameters in a previous Ajax request. The front-end request code is as follows:

 	toLogin(){
                this.$refs.loginFormRef.validate(async valid=>{
                    if(! valid)return;
                    const {data:res}=await this.$http.post("getUserByMessage".this.loginForm);
                    if(res.code==200) {this.$message.success(res.message);
                        this.$router.push({path:"/home"});
                    }else if(res.code==400) {
                        this.$message.error(res.message);
                    }else if(res.code==404) {this.$message.error(res.message); }})},Copy the code

Back-end code:

public class UserController {
    @Autowired
    UserService userService;
    @RequestMapping("/getUserByMessage")
    public R getUserByMess(@RequestParam(value = "username")String username,@RequestParam(value = "password") String password){
        User user=userService.getUserByMassage(username);
        if (user==null) {return R.error().setCode(500).setMessage("Account does not exist");
        }else if (password.equals(user.getPassword()))
        {
            return R.ok().setCode(200).setMessage("Login successful");
        }else return R.error().setCode(400).setMessage("Password error");

    }
Copy the code

Problem location

Since I just learned Vue(I learned it yesterday), Axios did the same thing, but it’s not possible to switch back to Ajax, so we opened up Axios’s Chinese document to see if there were any clues.

. Well, I don’t see anything special about Axios from this point of view, so let’s take a look at Ajax features and make a comparison

See what’s going on here? Yeah, we can see that one of the characteristics of Axios isAutomatically converts to JSON dataIf you look down at the documentation for the Axios API, you can see this:

Yes, Axios will default to our request when no request header is specifiedJsonSend to the back end, now let’s look at the way the back end code gets the front end parameters:

public R getUserByMess(@RequestParam(value = "username")String username,@RequestParam(value = "password") String password)
Copy the code

I am using@RequestParamThis annotation is to get the value from the front end, and what is this annotation used for? Take a closer look at the Spring documentation:

The @requestParam annotation is used to request parameters that are not in the request400The error. The default Json array sent by Axios does not match the single parameter required by @requestParam.

I was careless

How to solve

The solution is divided into two ways: ① change the backend to receive Json array annotations,② change the request header, do not pass Json array to the backend.

Use the spring-provided @RequestBody to receive the array

Use application/ X-www-form-urlencoded request headers

Axios’ official documentation provides a solution that looks like this

let param = new URLSearchParams()
param.append('username'.'username')
param.append('password'.'password')
axios({
    method: 'post'.url: '/getAllUserMessage'.data: param
})
Copy the code

Test it out:

See the browser’s debugger as you can see, by the modified request is successful, returned to the stranger and encouraging 200, shout ~ finally solved, can also happy to play the wild brawl, as on the front end to change request header or back-end modify receiving method, can have to look at the front and back side friends into consensus ~ ~ ~ / / / \ ~ ~ ~ (^ v ^).

One last word

Error reporting and troubleshooting are the problems that every beginner has to face when learning a new framework/language. In my previous summer internship experience, every error sorting is the best time to learn knowledge, because troubleshooting generally involves every step from phenomenon to principle. So what I want to say is, don’t be afraid or resist seeing a screen full of scarlet exclamation marks. Learning to accept and understand is a must for every developer. Every mistake is a foundation and experience for future success.