Spring Boot REST - Required String parameter is not present

Question

I have trouble with sending data to Spring Boot server. I check with Postman, everything is good, but I use axios library of ReactJS, i get error

Required String parameter 'name' is not present.

addProduct funtion

addProduct = (e) => {
 e.preventDefault();
    var { productName, productPrice, productStatus } = this.state;
    callApi('product/add', 'POST', {
        name: productName,
        price: productPrice,
        status: productStatus
    }).then(res => {
        console.log(res);
    });
}

productController.java

@RestController
@RequestMapping(path = "/api/product")
public class ProductController {
    @Autowired
    private ProductRespository productRespository;

    @GetMapping(path = "/all")
    public @ResponseBody Iterable<Product> getAllProduct(){
        return productRespository.findAll();
    }

    @PostMapping(path = "/add")
    @ResponseBody
    public String createProduct(@RequestParam String name, @RequestParam Integer price, @RequestParam String status){
        Product product = new Product();
        product.setName(name);
        product.setPrice(price);
        product.setStatus(status);
        productRespository.save(product);
        return "OK";
    }
}

apiCaller.js

import axios from 'axios';
import * as Config from './../constants/Config';

export default function callApi(endpoint, method, body) {
    return axios({
        method: method,
        url: `http://localhost:8000/api/${endpoint}`,
        data: body,
        headers: {
            'Access-Control-Allow-Origin': '*' 
        }
    }).catch(err => {
        console.log(err);
    });
}

how can I solve?

Answer 1

Your rest service expects name, price, status as request parameters and in spring these are mandatory by default. But in your react code you are not sending these as request parameters, instead you are sending them as request body.

As name is the first param as soon as it's not available spring throws 'name' not available exception, but once you fix it it will throw for price and then status. So fix them all together.

You have to either change your controller method like below, which will be more code efficient and rest standard way.

@PostMapping(path = "/add")
@ResponseBody
public String createProduct(@RequestBody Product product){
    productRespository.save(product);
    return "OK";
}

OR change your react code to send them in the request like below. But for 'POST' methods this is not recommended. Because this will reveal the information passed in url itself.

addProduct = (e) => {
    e.preventDefault();
    var { productName, productPrice, productStatus } = this.state;
    callApi('product/add?name=' + productName +  '&price=' + productPrice + '&status=' + productStatus , 'POST', {}).then(res => {
        console.log(res);
    });
}

Answer 2

The @RequestParam annotation gets its data from the url. Which should be like:

?name=myname&price=100&status=ok

The @RequestBody annotation is what you are looking for if you are sending the data as a json object in the body of the request. Make sure you also set the Content-Type in your axios request to application/json

axios.post('url', JSON.stringify({
        "name": productName,
        "price": productPrice,
        "status": productStatus,
     }) , { headers: {  "Content-Type": "application/json"  }
})