reactjs - 使用 Spring api 从前端 ReackJS 获取问题，使用 ouath，“error_description”问题：“Missing grant type””

Question

我在前端的 REACTJS 中的 fetch() 有问题，但是当我使用邮递员时，一切都很好。当我使用邮递员时，我有这样的回应->

 "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsiYXBpIl0sInVzZXJfbmFtZSI6ImFkbWluQGFkbWluLnBsIiwic2NvcGUiOlsicmVhZCIsIndyaXRlIl0sImV4cCI6MTU3ODk0MjE4NSwiYXV0aG9yaXRpZXMiOlsiQURNSU4iXSwianRpIjoiNWE2MzNkMDktZjJkYi00NmU4LTllNzMtOTlmNWYzM2UwN2IxIiwiY2xpZW50X2lkIjoiZ2xlZS1vLW1ldGVyIn0.S8z75ar9pmAZkxYUwG6Cz5LX6l7B8n5-lLPdlS-IB54",
"token_type": "bearer",
"refresh_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsiYXBpIl0sInVzZXJfbmFtZSI6ImFkbWluQGFkbWluLnBsIiwic2NvcGUiOlsicmVhZCIsIndyaXRlIl0sImF0aSI6IjVhNjMzZDA5LWYyZGItNDZlOC05ZTczLTk5ZjVmMzNlMDdiMSIsImV4cCI6MTU3ODk0MzA4NSwiYXV0aG9yaXRpZXMiOlsiQURNSU4iXSwianRpIjoiOWRmZmU5ZDEtYjVjMC00YzMwLWIzZDQtODlhYjg0OTdhOTYwIiwiY2xpZW50X2lkIjoiZ2xlZS1vLW1ldGVyIn0.Q0gygNqGEjForZJd5o4NMvE40OS_9869oM5qeOAIvpQ",
"expires_in": 99,
"scope": "read write",
"jti": "5a633d09-f2db-46e8-9e73-99f5f33e07b1"

这是我的邮递员要求：

    var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
myHeaders.append("Authorization", "Basic Z2xlZS1vLW1ldGVyOnNlY3JldA==");

var formdata = new FormData();
formdata.append("username", "[e-mail]");
formdata.append("password", "admin");
formdata.append("grant_type", "password");

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

fetch("localhost:8080/oauth/token", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

我在我的 ReactJS 中使用相同的代码：

我有回应：

 signIn() {
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
    myHeaders.append("Authorization", "Basic Z2xlZS1vLW1ldGVyOnNlY3JldA==");

    var formdata = new FormData();
    formdata.append("username", "[e-mail]");
    formdata.append("password", "admin");
    formdata.append("grant_type", "password");

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

    fetch("http://localhost:8080/oauth/token", requestOptions)
        .then(response => response.text())
        .then(result => console.log(result))
        .catch(error => console.log('error', error));
}

{"error":"invalid_request","error_description":"Missing grant type"}

前面在端口 3030 上弹簧在 8080

某人知道发生了什么事吗？

标签： reactjsfetchspring-security-oauth2