javascriptxmlxmlhttprequesthttp-status-code-400

API GET request with body text/data

I need to request the API created by another person for this project. In his documentation I have to do the following:

Send GET request to this API URL https://visblueiotfunctionapptest.azurewebsites.net/api/GetDeviceList

Along with authorization token which I do have and request body

{
"UserEmail" : "xxxx@xxxxx.dk", //this can be null

"FromDateUTC" : "2012-04-23T18:25:43.511Z"

}

In the postman, this works like a charm and I can get data as I would like to. Problem is when I try to do the same thing from front-end (react-app) or anywhere else (any other API environment like Postman)

I always get 400 bad request which leads me to think there is a problem with data I pass in the body.

I tried to use different ways of sending a request (AXIOS, Fetch, XML, Ajax) the same for all of them. I even tried to generate snippet from Postman and nothing.

Here is the example of my request code

var data = "{\"Usermail\":\"cc@ccc.dk\",\"FromDateUTC\":\"2012-04-23T18:25:43.511Z\"}";

      var xhr = new XMLHttpRequest();
      xhr.withCredentials = true;
      
      xhr.addEventListener("readystatechange", function () {
        if (this.readyState === 4) {
          console.log(this.responseText);
        }
      });
      
      xhr.open("GET", "http://visblueiotfunctionapptest.azurewebsites.net/api/GetDeviceList");
      xhr.setRequestHeader("Content-Type", "text/plain");
      xhr.setRequestHeader("Authorization", "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik4tbEMwbi05REFMcXdodUhZbkhRNjNHZUNYYyIsImtpZCI6Ik4tbEMwbi05REFMcXdodUhZbkhRNjNHZUNYYyJ9.eyJhdWQiOiIzMDk5OGFhZC1iYzYwLTQxZDQtYTYwMi03ZDRjMTRkOTU2MjQiLCJpc3MiOiJodHRwczovL3N0cy53aW5kb3dzLm5ldC8zNWNhMjFlYi0yZjg1LTRiNDMtYjFlNy02YTlmNWE2YzBmZjYvIiwiaWF0IjoxNTUzMDY3Mjk3LCJuYmYiOjE1NTMwNjcyOTcsImV4cCI6MTU1MzA3MTE5NywiYWNyIjoiMSIsImFpbyI6IkFVUUF1LzhLQUFBQStveUIvZmpUV0p1SzFFYVo5elBJbmlXbjRnVVEwL20vTkJXK3V6Y2JvRXhpZnhyZWpWbHpZazR1MzM5NHJ5M2Ftc3ZEb0xEWWgzenJHRFVyR2FHR1hBPT0iLCJhbXIiOlsicHdkIl0sImFwcGlkIjoiMzA5OThhYWQtYmM2MC00MWQ0LWE2MDItN2Q0YzE0ZDk1NjI0IiwiYXBwaWRhY3IiOiIxIiwiZW1haWwiOiJ0b21hc0AzcGFydC5jb20iLCJpZHAiOiJodHRwczovL3N0cy53aW5kb3dzLm5ldC82MzllOGQyZi1mZGFmLTQ3MGQtYjEzNi05NTk1MzE2OTA1N2UvIiwiaXBhZGRyIjoiMTc4LjE1Ny4yNDkuMTMwIiwibmFtZSI6IlRvbcOhxaEgSGF2ZXJsYSAzUEFSVCIsIm9pZCI6Ijk5ODBjOWY0LTc5OWItNDgyMC04NDJjLWEwMjBkMGEyODQ2NiIsInNjcCI6IlVzZXIuUmVhZCIsInN1YiI6ImpIaVl3Sm51NmxtRkU5dDJ5Tkc0YXp6NV9sSnJsSTRBM01PWmx2SnZ2SFEiLCJ0aWQiOiIzNWNhMjFlYi0yZjg1LTRiNDMtYjFlNy02YTlmNWE2YzBmZjYiLCJ1bmlxdWVfbmFtZSI6InRvbWFzQDNwYXJ0LmNvbSIsInV0aSI6IjZ3QjBsdFBNTVVPS1p1YlYtME1PQUEiLCJ2ZXIiOiIxLjAifQ.bVr93rd8BtooqH9n7Fv9oMu083TNxto-6ArrDap87QljBb7OU1sQ_LHbLxcKle4MXjUc6102yBs_EKTaNN-ojmz7eZ5-JcDiTlgW2VQ_yUDdnScXzwFoCwID5FdmzLHfGPtSncLo0sYwx1AwQi18G0eITMR3y2xdSggd2vX4DCthc_iG8TGLpwr73mFpaIrWoiC-4Z9dTgA9uqN45L-20PcEDymgcdT87b92t6H5c33oc4RXClnNef0x3OV2PMCXBzfPHXGFKpY9rfgJI2gt57b-Ubbh21OQilvg05lKAXeMdi4D1ChFzXyMTqXEYxm4apRQa3phd_Wy2rkgqb4_tA");
      xhr.setRequestHeader("cache-control", "no-cache");
      xhr.setRequestHeader("Postman-Token", "ffe68215-e89d-4847-8f12-deef46d44393");
      
      xhr.send(data);

What am I doing wrong here and what is the difference between my request and how Postman does it?

EDIT

Why this example works in Postmanenter image description here

Solution

  • You cannot send a request body when using a GET request. Also set the content-type to application/json

    Try a POST request:

    var data = {
    "UserEmail": "xxxx@xxxxx.dk",
    "FromDateUTC": "2012-04-23T18:25:43.511Z"
}
var url = "http://visblueiotfunctionapptest.azurewebsites.net/api/GetDeviceList";
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open("POST", url);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.setRequestHeader("Authorization", "Bearer *your secret token*");
xhr.setRequestHeader("cache-control", "no-cache");
xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
        console.log(this.responseText);
    }
});
xhr.send(JSON.stringify(data));

    EDIT

    If it has to be a GET request you can send the data in the query string:

    var query_string = "UserEmail=" + encodeURIComponent("xxxx@xxxxx.dk") + "&FromDateUTC=" + encodeURIComponent("2012-04-23T18:25:43.511Z")
var url = "http://visblueiotfunctionapptest.azurewebsites.net/api/GetDeviceList";
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open("GET", url + "?" + query_string);
xhr.setRequestHeader("Authorization", "Bearer *your secret token*");
xhr.setRequestHeader("cache-control", "no-cache");
xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
        console.log(this.responseText);
    }
});
xhr.send();

    EDIT2

    It appears that it is valid to send a request body with the GET method. Doing so is discouraged though. See this stackoverflow answer for details.

    According to MDN The XMLHttpRequest API simply ignores any body when the method is GET or HEAD.

    Your postman seems to include the request body with the GET method and the call succeeds.

    You are stuck with two possibilities:

    When the API only accepts GET and body payload you will not be able to use this API using XMLHttpRequest.