How to use spring boot java to properly use axios.post from React

Question

So I am using axios.post on React here is my code

React GenService.jsx

import axios from "axios";
import { Route, withRouter } from "react-router-dom";


const COURSE_API_URL = "http://localhost:8080";


class GenService {
  retrieveAll() {
    return axios.get(`${COURSE_API_URL}`);
  }
  pAll() {
    return axios.post(`${COURSE_API_URL}` + "/user", {
      firstName: "Fred",
      lastName: "Flintstone"
    });
  }
}

export default new GenService();

But I can't figure out how to call firstName and lastName in backend java using spring boot

SpringBootLd2nlApplication.java

package com.ld2nl.springbootld2nl;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

@SpringBootApplication
@CrossOrigin(origins = { "http://localhost:3000", "http://localhost:4200" })
@RestController

public class SpringBootLd2nlApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootLd2nlApplication.class, args);
    }
    //works
    @RequestMapping(value = "/")
    public String say() {
        return "Sending Hello To React";
    }

//not work
    @RequestMapping(value = "/user")
    public String reply(@RequestParam String firstName) {
        return firstName;
    }

}

As you can see can't get the area marked as "//not work" to properly call firstName and lastName

Currently giving error

Required String parameter 'firstName' is not present
....

You're sending a JSON request body. Not a request parameter. docs.spring.io/spring/docs/5.2.2.RELEASE/… — JB Nizet
– JB Nizet, Commented Dec 19, 2019 at 23:39

Sobin George · Accepted Answer · 2020-11-11 13:25:02Z

3

Instead of trying to directly fetch the parameter which won't work as POST sends data as a payload/JSON object rather than split parameter-wise, below should work:

  @PostMapping(value = "/user")
   public String reply(@RequestBody Map<String, Object> payLoad) {
       return (String)payLoad.get("firstName");
   }

answered Nov 11, 2020 at 13:25

Sobin George

867 bronze badges

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

Comments

Pawel Veselov · Accepted Answer · 2020-11-19 12:46:46Z

1

Instead of passing firstname like that, try creating a const for firstname.

const firstName = "Fred";
...
...
pAll(){
     return axios.post(http://localhost:8080/users/${firstname});
}

And in the Springboot, add these lines in the reply() function

@GetMapping("/users/{firstname}
public String reply(@PathVariable String firstName) {
    return firstName;
}

edited Nov 19, 2020 at 12:46

Pawel Veselov

4,2738 gold badges49 silver badges71 bronze badges

answered Nov 19, 2020 at 9:35

Gokul S

541 bronze badge

Comments

John Tribe · Accepted Answer · 2021-05-27 17:35:51Z

0

The best way (production way) is to provide separate DTO.

   public class SendMessageDto {
     @NotBlank @Length(min=4)...
     private String userName;
     public String getUserName() {return this.userName} ;
   }

In controller

   @PostMapping(value = "/user")
   public String reply(@Valid @RequestBody SendMessageDto) { //
       return payLoad.getUserName();
   }

@RequestBody - is optional in this context.
@Valid - needed for request validation

answered May 27, 2021 at 17:35

John Tribe

1,68219 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to use spring boot java to properly use axios.post from React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related