带有正文/数据的API GET请求

Question

我需要为此项目请求其他人创建的API。在他的文档中，我必须做以下事情：

发送GET请求到此API网址https://visblueiotfunctionapptest.azurewebsites.net/api/GetDeviceList

与我拥有的授权令牌一起请求正文

{
"UserEmail" : "[email protected]", //this can be null

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

}

在邮递员中，这就像魅力一样，我可以按照自己的意愿获取数据。问题是我尝试从前端（react-app）或其他任何地方（像Postman这样的任何其他API环境）做同样的事情

我总是得到400个不好的请求，这让我觉得我在身体中传递的数据存在问题。

我尝试使用不同的方式为所有这些发送请求（AXIOS，Fetch，XML，Ajax）。我甚至试图从Postman生成片段，什么都没有。

这是我的请求代码的示例

var data = "{\"Usermail\":\"[email protected]\",\"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);

我在这里做错了什么，我的请求和Postman如何做到这一点有什么区别？

编辑

为什么这个例子在Postman中起作用

Answer 1

使用GET请求时，您无法发送请求正文。同时将content-type设置为application/json

尝试POST请求：

var data = {
    "UserEmail": "[email protected]",
    "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));

编辑

如果必须是GET请求，您可以在查询字符串中发送数据：

var query_string = "UserEmail=" + encodeURIComponent("[email protected]") + "&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();

我懂了

似乎使用GET方法发送请求正文是有效的。但是，这样做是不鼓励的。有关详细信息，请参阅此stackoverflow答案。

根据MDN，当方法是GET或HEAD时，XMLHttpRequest API会忽略任何正文。

您的邮递员似乎包含GET方法的请求正文，并且调用成功。

你有两种可能性：

• API已经接受另一种格式 - 带有查询字符串的GET或带有请求体的POST。
• 或者你需要说服API的维护者改变实现。

当API仅接受GET和body payload时，您将无法使用XMLHttpRequest使用此API。