如何修复尝试访问 API 时的错误？

Question

我想生成令牌以在 SharePoint Online 列表中执行 CRUD 操作。我能够在 Postman 中生成令牌。但我希望它在我的 React 应用程序中自动生成以执行 CRUD 操作。我从 Postman 复制代码片段并粘贴到我的 React 应用程序中，但它抛出错误。这是错误：

UsingFetch.js:181          POST https://accounts.accesscontrol.windows.net/834fb7b4-624d-4de8-a977-2d46ad979bd9/tokens/OAuth/2 400 (Bad Request)

{"error":"invalid_request","error_description":"AADSTS900144: The request body must contain the following parameter: 'grant_type'.\r\nTrace ID: d2dcb2da-1aae-4af2-a3e3-aabc35ce4301\r\nCorrelation ID: c90dff14-b64d-4f47-a01c-dfe498ec2f40\r\nTimestamp: 2022-02-23 09:07:45Z","error_codes":[900144],"timestamp":"2022-02-23 09:07:45Z","trace_id":"d2dcb2da-1aae-4af2-a3e3-aabc35ce4301","correlation_id":"c90dff14-b64d-4f47-a01c-dfe498ec2f40","error_uri":"https://accounts.accesscontrol.windows.net/error?code=900144"}

这是

的屏幕截图

这是我从 Postman 复制的代码片段：

const generateToken = async () => {
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
    myHeaders.append(
      "Cookie",
      "esctx=AQABAAAAAAD--DLA3VO7QrddgJg7WevrQx7IG43UK7gipYHXtqZImLB1jfBLK4PTkZlgLq3BvpTizt3xt8EZQrpUJGa0hTnSdpRf-AenJvnGNABiv2cWYWSyJj9QNm-vWalRGHuDZ6Km_DaX_5CQHUa4H8U-osEGCM48buOyj0G819e1NoxuvoOD6fZvMI5nnDWZyjNa1mogAA; fpc=An1vbDtRI8BAiCLlUBBGpFXf9_srAQAAACDgp9kOAAAA; stsservicecookie=estsfd; x-ms-gateway-slice=estsfd"
    );

    var formdata = new FormData();
    formdata.append("grant_type", "client_credentials");
    formdata.append(
      "client_id",
      "myclientid"
    );
    formdata.append(
      "client_secret",
      "mysecretcode"
    );
    formdata.append(
      "resource",
      "00000003-0000-0ff1-ce00-000000000000/cooponline.sharepoint.com@834fb7b4-624d-4de8-a977-2d46ad979bd9"
    );

    var requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: formdata,
      redirect: "follow",
    };

    await fetch(
      "https://accounts.accesscontrol.windows.net/834fb7b4-624d-4de8-a977-2d46ad979bd9/tokens/OAuth/2",
      requestOptions
    )
      .then((response) => response.text())
      .then((result) => console.log(result))
      .catch((error) => console.log("error", error));
  };

谁能给我一个解决方案？谢谢。

Answer 1

此错误说明出了什么问题：The request body must contain the following parameter: 'grant_type'。

要解决此问题，只需将其添加为参数（在本例中为 formData）。根据SharePoint docs，这个值必须设置为client_credentials.

formdata.append(
    "grant_type",
    "client_credentials"
);

编辑:

显然，请求正文的格式不寻常。您尝试将其作为 application/json 发送，但 MS 期望 application/x-www-form-urlencoded 是这样的：

POST /{tenant}/oauth2/v2.0/token HTTP/1.1           //Line breaks for clarity
Host: login.microsoftonline.com
Content-Type: application/x-www-form-urlencoded

client_id=535fb089-9ff3-47b6-9bfb-4f1264799865
&scope=https%3A%2F%2Fgraph.microsoft.com%2F.default
&client_secret=sampleCredentia1s
&grant_type=client_credentials

因此，与其将 formData 对象作为请求主体传递，不如将其包装成这样的字符串：

const body = Object.keys(formData)
    .map(key => `${key}=${formData[key]}`)
    .join('&');

并将其作为正文传递。

如何修复尝试访问 API 时的错误？

How to fix the error when trying to access the API?

google-chrome

localhost

reactjs

postman