Question

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

将GET请求发送到此API网址 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的处理方式有什么区别？

编辑

为什么此示例可在邮递员中使用

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方法发送请求正文似乎是有效的。但是不鼓励这样做。有关详细信息，请参见此stackoverflow答案。

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

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

您会遇到两种可能性：

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

当API 仅仅接受GET和主体有效载荷时，您将不能通过XMLHttpRequest使用此API。

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

1 个答案: