How to define @RequestParams of spring POST API to Http post method of Angular?

Question

I have a REST API that is accepting two parameters that are username and password and giving the result as true or false on the basis of user input at front end. I am facing some issue in calling the REST API to my angular 8 code.

SPRING REST API

@RequestMapping(value = "/checkData", method = RequestMethod.POST)
public String Authentication(@RequestParam("username") String username, @RequestParam("password") String password) {

}

I am trying to access the given API through my angular 8 app through services and defined the service as follows :

AuthLoginInfo.ts

export class AuthLoginInfo {
    username: string;
    password: string;
 
    constructor(username: string, password: string) {
        this.username = username;
        this.password = password;
    }
}

checkLogin(userInfo : AuthLoginInfo){
     return this.http.post(`${API_URL}/APP/checkData/${userInfo.username}/
       ${userInfo.password}`,{},{responseType: 'text'})
  }

But when I am running my app I am not getting the params in proper format. Can anyone tell me how to define the request params in HTTP POST API ?

Thank you in advance for your suggestions.

question from:https://stackoverflow.com/questions/66061111/how-to-define-requestparams-of-spring-post-api-to-http-post-method-of-angular

Answer 1

The way you send them from the frontend, they are considered path parameters not query parameters. Configure your backend in the same way

@RequestMapping(value = "/checkData/{username}/{password}", method = RequestMethod.POST)
public String Authentication(@PathParam("username") String username, @PathParam("password") String password) {

}

In case that you want to work with your existing code and you don't want to change your backend, then you must adjust your frontend. As your backend is right now it expects query parameters in the url, so you need to send those in the frontend

checkLogin(userInfo : AuthLoginInfo){
     return this.http.post(`${API_URL}/APP/checkData?username=${userInfo.username}&
       password=${userInfo.password}`,{},{responseType: 'text'})
  }