3

I have a React application where I am changing POST method to GET with the request body as it is. It works fine with POST request however when I change the method to GET, it gives me error-

message: "org.springframework.http.converter.HttpMessageNotReadableException: Required request body is missing: public

My Front End Code-

export const setData = (getData)  => dispatch => {
    axios({
        method: 'GET',
        url: 'http://localhost:8080/api',
        headers: {
          'Content-Type': 'application/json'
        },
        data: getData
      })
      .then (response => {
      dispatch({
        type: API_DATA, 
        payload: response.data
      })
      dispatch({
        type: SET_SEARCH_LOADER, 
        payload: false
      })
      })
      .catch(function(error) {       
      })
}

Can someone let me know what I am missing here. As per my understanding, http allows to have a request body for GET method.

techie_questie
  • 1,434
  • 4
  • 29
  • 53
  • Axios GET request on Browser uses XMLHttpRequest which doesn't support request body and hence you face this issue. Check [this issue](https://github.com/axios/axios/issues/462#issuecomment-366377629) on github for more details – Shubham Khatri Jan 02 '19 at 11:35

3 Answers3

11

As per my understanding, http allows to have a request body for GET method.

While this is technically true (although it may be more accurate to say that it just doesn't explicitly disallow it), it's a very odd thing to do, and most systems do not expect GET requests to have bodies.

Consequently, plenty of libraries will not handle this.

The documentation for Axois says:

  // `data` is the data to be sent as the request body
  // Only applicable for request methods 'PUT', 'POST', and 'PATCH'

Under the hood, if you run Axios client side in a web browser, it will use XMLHttpRequest. If you look at the specification for that it says:

client . send([body = null])

Initiates the request. The body argument provides the request body, if any, and is ignored if the request method is GET or HEAD.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • my getData is an emptyObject here which I am trying to send. Will this not work? – techie_questie Jan 02 '19 at 12:11
  • @techiequestie — No, it won't. The browser will ignore whatever you try to set as the request body and send the GET request without one. – Quentin Jan 02 '19 at 12:35
  • So how should I handle it? Do I need to add any param to the request? – techie_questie Jan 02 '19 at 12:39
  • Either the request *should* be a POST request or the server should *not* expect a request body on a GET request. I have no idea what the request is requesting, so I can't say which of those is the right approach. – Quentin Jan 02 '19 at 12:40
  • I have another api where from backend, they have appended the data as a parameter in the api, so then it works. But for this api, its not there so, I am trying to figure out if that is a must to have in backend or is there any way I can handle this through UI. – techie_questie Jan 02 '19 at 12:40
  • @techiequestie — As I said in the answer, you *can't* send a GET request with a body from the browser. – Quentin Jan 02 '19 at 13:37
  • Thank you @Quentin so much! You just saved me from two hours of suffering to find the error in my app. – Vaclav Vlcek Mar 23 '23 at 04:16
3

If you want to send parameters with get request in axios, you should send parameters as params.

If you want to set "Content-type":"application/json" and send params with get request, you should also send an empty data object.

For example:

const AUTH_TOKEN = 'Bearer token'
const config = {
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization': AUTH_TOKEN,
    },
    data: {},
    params: {
        "post_id": 1
    }
}
axios.get("http://localhost/api/v1/posts/", config)
Amirrossein Sadeghi
  • 61
  • 6
0

This is not axios, the error origniates from the java backend you're talking to. The public field in your request body is missing.

If you just want to send the data as parameters (which would be odd), pass it using params instead of data (as shown here: https://github.com/axios/axios#example).

I personally don't think your API should support GET with a request body (talk to the devs and ask for documentation).

Fred
  • 3,324
  • 1
  • 19
  • 29