How to pass data in body in get type Api in react.js?

Question

I am trying to pass data in body of get type Api in react.js app. I am using the following code. But Api doesn't get any data.

getUnits = ( key, text, code, limit, offset ) => {
                let data = JSON.stringify( { unit: { key, text, code, limit, offset } } );
                let config = {
                    method: 'get',
                    url: BaseURL + 'unit',
                    headers: { 'Content-Type': 'application/json' },
                    data: data
                };
                axios( config ).then( res => {
                        store.dispatch( {
                            type: GET_UNIT,
                            payload: res.data.units
                        } )
                } ).catch( err => {
                    console.log(err);
                })
            })
        }

GET method does not have the body section. You can pass data via the query string and get it in the backend. — Jayna Tanawala, Dec 29 '20 at 06:06
But when we run this Api in postman. Api respond on the provided data. It means there is a way through which we can pass data to get type api in body. — Shoaib, Dec 29 '20 at 06:07
My backend platform is in Node js. and when we see the code of postman thats uses axios. — Shoaib, Dec 29 '20 at 06:10
@Shoaib No, postman doesn't use axios. What code are you referring to? — Ramesh Reddy, Dec 29 '20 at 06:12
@RameshReddy He is referring to the axios code you can generate based on the current query, postman has that code feature. But axios won't work due to javascript restrictions — Sinan Yaman, Dec 29 '20 at 06:13
@RameshReddy the code which I present is the code generated by postman. But when I use it in react.js app. It doesn't work. — Shoaib, Dec 29 '20 at 06:14
Oh, I thought you meant that postman is internally using axios for requests. Anyway, if you want to send data use query params or opt for a POST method instead of GET. — Ramesh Reddy, Dec 29 '20 at 06:16
@RameshReddy when postman can send data in body to get type Api. It means brother there is an way to pass data in body in react.js. — Shoaib, Dec 29 '20 at 06:17
@Shoaib There's always a way if you ignore the specification. See [this](https://stackoverflow.com/questions/978061/http-get-with-request-body#:~:text=Server%20semantics%20for%20GET%2C%20however,never%20useful%20to%20do%20so.) — Ramesh Reddy, Dec 29 '20 at 06:19
@Shoaib You CANNOT send a body in get request using axios in reactjs. Plus it is a bad practice anyway. — Sinan Yaman, Dec 29 '20 at 06:29

Sinan Yaman · Accepted Answer · 2020-12-29T06:14:50.557

Adding on what @Jayna commented, you can't send a body with a get request. You may do it on Postman and generate the axios code for it, but it won't work due to the XMLHTTPREQUEST javascript has. Body is ignored in get request by default

1You need to pass params instead like this:

                let config = {
                    method: 'get',
                    url: BaseURL + 'unit',
                    headers: { 'Content-Type': 'application/json' },
                    params: {
                      field1: 'field1',
                      field2: 'field2'
                    }
                };

So my suggestion is change your url on backend to accept query parameters and send the axios get request like this.

How to pass data in body in get type Api in react.js?

1 Answers1