React js sending json to Spring boot Request failed with status code 400

Question

I'm trying to send a state created in the front react js part to the backend spring boot part and read my state in JSON mode, I used Axios but I get this error:

Request failed with status code 400

my frontend code :

onSubmit(e){
    e.preventDefault();
    const FilterRegion={
      //region
     eu:this.state.eu,
      americas:this.state.americas,
      aae:this.state.aae,
      ger:this.state.ger,
      eu2:this.state.eu2,
      latam : this.state.latam,
      empty:this.state.empty,
      allregion:this.state.allregion,
       }
    console.log(FilterRegion)
    axios.get("http://localhost:8080/MenuFiltre/filtreregioncloser",FilterRegion)
  }

Controller in back end :

@Controller
@RequestMapping("/MenuFiltre")
@RestController
@CrossOrigin()
public class MenuFiltre {
    @GetMapping("/filtreregioncloser")
    public Iterable<Closerfprfx>gettab1(@RequestBody String jsonStr)
    {
        JSONObject jObject = new JSONObject(jsonStr);
         System.out.println(jsonStr);

        return null;

        
        
    }

}

Trying taking React out of the equation for a second and try it in `Postman`. Check if your url matches in both React and Postman match. I would also provide what your "filteredRegion" object looks like. I don't think you can pass your object as you do. Could be wrong but since you are calling the "get" method, I would have thought you'd have to pass a string with eu='a'&=americas='a'&=..... Maybe it is handled by axios automatically, but I doubt it. Someone else might confirm this. — Thierry, Aug 04 '20 at 13:38
It is not suggested to use Get with body. You can try changing the get to POST in both react and spring-boot. — GnanaJeyam, Aug 04 '20 at 14:15

Ananthapadmanabhan · Accepted Answer · 2020-08-04T13:55:53.263

Firstly, you can remove the @Controller annotation from your controller as you already have the @RestController annotation to make it a rest controller. Secondly, if yoou want to have a request body or json send to the endpoint use a POST request. If you ask me why not to use a Request body with a GET request, the short version is it's because of HTTP spec, read : HTTP GET with request body

The http status code 400 is basically because of Bad request. The issue is with your controller endpoint. You are sending the data as json from your ui . Instead of reading the data as a string from the request body, use a pojo class like FilterRegion:

@PostMapping("/filtreregioncloser")
public Iterable<Closerfprfx>gettab1(@RequestBody FilterRegion filterRegion)
{
     //No need for Jsonobject while using POJO springboot will convert it for you from json to POJO
     System.out.println(filterRegion);
     return null;      
}

Create the POJO class FilterRegion with the fields in the json like :

class FilterRegion {
 String eu;
 String americas;
 //Add other fields and the constructor,getters and setters
}

score 0 · Answer 2 · answered Aug 04 '20 at 13:33

0

change your code as below:

axios.get("http://localhost:8080/MenuFiltre/filtreregioncloser",JSON.stringify(FilterRegion))

answered Aug 04 '20 at 13:33

Dishant Desai

146
6

React js sending json to Spring boot Request failed with status code 400

2 Answers2