1

I'm trying to send data in a body using the GET method. It's working fine when i try to run using POSTMAN/cURL/Python but it's not working using AXIOS(ReactJS).

cURL:

curl -X GET \
  http://127.0.0.1:8000/xyz/xyz/ayx-api/ \
  -H 'Authorization: Token 980e4e673a9cfb4c99cb35313f65a446aa44faf7' \
  -H 'Content-Type: application/json' \
  -H 'Postman-Token: 1ee27393-b4b0-446a-b613-bd319e02e3c8' \
  -H 'cache-control: no-cache' \
  -d '{"dataId": 1, "date": "2018-03-01", "days": 9 }'

this curl working fine

Using Axios:

import axios from 'axios';

const baseUrl = process.env.BACKEND_SERVER_URL;

export const fetchDataObjects = async() => {
    const header = {
            'Content-Type': 'application/json',
            'Authorization': `Token ${localStorage.token}`,

        }
    const data ={"dataId": 1, "date": "2018-03-01", "days": 9 }
    const res= await axios.get(`${baseUrl}/ayx-api/`,{data:JSON.stringify(data)}, {headers: header})
    // above line need to helop
    return res.data;
  }

How can i send data in body using axios in get method?

Thanks in advance.

Mr Singh
  • 3,936
  • 5
  • 41
  • 60
  • 2
    It's not wise to send data with GET request. This [answer](https://stackoverflow.com/a/10299780/9335442) can be helpful. – Taha A. Jan 02 '19 at 15:12

2 Answers2

1

The HTTP GET method requests shouldn't have a request body, and axios can't create a GET request with a body. It also can't create a query string for you, if you want to pass a query string, you have to do it manually, or with something like qs:

axios.get(`${baseUrl}/ayx-api/${qs.stringify(data)}`)
ryn
  • 66
  • 6
  • 1
    Have you check curl, where we can send data using get method – Mr Singh Jan 02 '19 at 18:28
  • @MrSingh `curl` can do that, but browsers can't. – ryn Jan 02 '19 at 18:47
  • 1
    I can perform same things using pyhton/java/php/ajax/go/angular and etc. Just i need to perform using react – Mr Singh Jan 03 '19 at 03:56
  • @MrSingh React is a library run in a browser. Browsers don't have the technical capability to send data via `GET`. If you can edit the API, the endpoint should accept a query string. If you use a framework like Rails, it already does it for you. – ryn Jan 03 '19 at 06:28
  • 1
    This may be the case - but it does not help those of us who have no control over what the consumed API accepts. We are using a large commercial companies API and a fundamental part of their API is GET Bodies. So this answer unfortunately is not helpful to me. It may be bad but at the end of the day this is what I need to implement. – user37309 Oct 27 '20 at 01:55
  • 2
    Futhermore "no GET body" rule has actually been deleted out of the HTTP standard. – user37309 Oct 27 '20 at 01:59
  • @user37309 Unfortunately, you cannot bypass the browser limitation. The answer has been true in 2019, and if browsers have added support to body in GET requests, then Axios should have been updated with the new feature enabled. – ryn Nov 08 '20 at 20:10
  • 1
    Axios is not solely a client side lib, in my case I am using it in a server side application. – user37309 Nov 09 '20 at 13:08
1

UPD: turns out that even manually you can't add a body to a GET request using the fetch method in the console of your browser (I've tried to do it in Google Chrome 108 and Firefox 107 they both return similar errors Request with GET/HEAD method cannot have body.). I guess it'll take some time for browsers to support it. As a workaround you can try switching to POST method on both backend (with a different path to make no collisions) and frontend.

Original answer:

You can create a GET request with body. You need to pass the body to AxiosRequestConfig (the second parameter of the axios.get method).

let body = {hit: "floor"} //can be a string or an object (refer to the docs)
axios.get(`url`, {data: body})

AxiosRequestConfig also accepts headers if you need any.

axios.get(`url`, {headers: {"Key": "keykeykey"}, data: body})

Thought the documentation says that the data is

Only applicable for request methods 'PUT', 'POST', 'DELETE', and 'PATCH'

you can actually pass the body (tested in axios 0.27) and the server should¹ receive it. And you also need to make sure that the server will accept such request since the constrain in the specification was removed almost a decade ago.

¹ - Citation from MDN's GET page:

Note: Sending body/payload in a GET request may cause some existing implementations to reject the request — while not prohibited by the specification, the semantics are undefined. It is better to just avoid sending payloads in GET requests.

I'm using axios for NestJS e2e testing and NestJS 9.1 with ExpressJS will accept body in the GET request (yes, you can retrieve it with the @Body() decorator).

OSA413
  • 387
  • 2
  • 4
  • 16