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.

Is the url you are calling something like api_url/APP/checkData/yourUsername/yourPassword ? — burm87
– burm87, Commented Feb 5, 2021 at 9:59
No, I want this to be appeared as localhost:8080/APP/checkdata?password=abc&username=xyz — Sanket Gupta
– Sanket Gupta, Commented Feb 5, 2021 at 10:06
Then what you are doing is correct. Are you able to call the endpoint with postman? — burm87
– burm87, Commented Feb 5, 2021 at 10:12
Yes, I am able to call it through postman but when I am hitting the same to the Angular UI it is not appearing correct. It seems to me something like this : localhost:8080/APP/checkData/abc/%20%20%20%20%20%20%20xyz — Sanket Gupta
– Sanket Gupta, Commented Feb 5, 2021 at 10:17
I am getting 404 not found as the URL is not coming in proper format — Sanket Gupta
– Sanket Gupta, Commented Feb 5, 2021 at 10:18

Panagiotis Bougioukos · Accepted Answer · 2021-02-05 15:34:53Z

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'})
  }

edited Feb 5, 2021 at 15:34

answered Feb 5, 2021 at 11:40

Panagiotis Bougioukos

19.6k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sanket Gupta Over a year ago

Thank you, Boug for response. Can you suggest something on front end side ? How to access the @RequestParam on the front end side as I am using spring in the back end and fetching the query parameters.

Panagiotis Bougioukos Over a year ago

On the frontend you don't access any RequestParam. You receive only a response which is a text. That is what you will receive and take care in the frontend

Sanket Gupta Over a year ago

I mean to say that I am fetching the username and password from the DB. I had used @RequestParam as I am fetching the query parameters. The given data is not coming from the path URI.

Sanket Gupta Over a year ago

Can you suggest how to use HttpParams with post method at UI side?

Panagiotis Bougioukos Over a year ago

As you have your this.http.post(`${API_URL}.... in your UI it should work

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related