API GET 请求正文 text/data

Question

我需要请求其他人为此项目创建的 API。在他的文档中，我必须执行以下操作：

向此发送 GET 请求 API url https://visblueiotfunctionapptest.azurewebsites.net/api/GetDeviceList

连同我拥有的授权令牌和请求正文

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

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

}

在邮递员中，这就像一个魅力，我可以随心所欲地获取数据。问题是当我尝试从前端（react-app）或其他任何地方（任何其他 API 环境，如 Postman）做同样的事情时

我总是收到 400 个错误的请求，这让我认为我在正文中传递的数据有问题。

我尝试使用不同的方式发送请求（AXIOS、Fetch、XML、Ajax），所有方式都相同。我什至尝试从 Postman 生成代码片段，但什么也没有。

这里是我请求代码的例子

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);

我在这里做错了什么，我的请求和 Postman 的处理方式有什么区别？

编辑

为什么这个例子在 Postman 中有效

Answer 1

使用 GET 请求时无法发送请求正文。同时将内容类型设置为 application/json

尝试 POST 请求：

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));

编辑

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

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

看来有效用GET方法发送请求体。但是不鼓励这样做。有关详细信息，请参阅此 Whosebug 答案。

根据 MDN XMLHttpRequest API 在方法为 GET 或 HEAD 时简单地忽略任何主体。

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

你有两种可能：

API 已经接受另一种格式 - GET 查询字符串或 POST 请求正文。
或者您需要说服 API 更改实现的维护者。

当 API 仅接受 GET 和 body payload 时你将 not 能够使用这个API 使用 XMLHttpRequest。

API GET 请求正文 text/data

API GET request with body text/data

xml

api

fetch

http-status-code-400