如何從前端向Spring發出HTTP POST請求？

Question

我正在嘗試通過ReactJS設置一個Webapp的前端，並通過Spring連接一個Java后端，但是我是Spring的新手。

我現在在RestController中設置了兩個不同的請求：

@RequestMapping(value = "/index")
public String index() {
        return "index string!";
}

@RequestMapping(method=RequestMethod.POST, value="/login")
public void login(@RequestParam("user") User user) {
        System.out.println(user);
}

我可以像這樣從前端成功查詢/ index：

fetch("http://localhost:3002/index").then(function(response) {
    console.log(response.text());
    return response;
});

這會打印一個Promise，其中包含字符串“索引字符串！”。 （我也不確定如何使用此字符串，但這不是我的主要問題）

我想使用POST請求發送數據（應該是PUT嗎？）以供用戶登錄。我的計划是從請求中獲取一個User Object，並針對Java代碼中其他地方的數據庫進行驗證。 這是一個用戶對象：

public class User {
  private String username;
  private String password;

  public User(String uName, String pass) {
    username = uName;
    password = pass;
  }
}

這是前端中的POST請求：

fetch('http://localhost:3002/login', {
        method: 'POST',
        body: {
          username: username,
          password: password
        }
    });

其中用戶名和密碼是從HTML解析的字符串。

我的理解是，Spring應該從請求的主體中創建一個User Object並讓我使用它，但是相反，我得到了一個400錯誤而沒有更多細節。

如何解決這個400錯誤，並成功地將數據從前端傳遞到后端？

編輯：這是返回的錯誤的前幾行

VM10542:1 POST http://localhost:3002/login 400 ()
(anonymous) @   VM10542:1
func    @   LoginPage.js:26

LoginPage.js：26是提取調用。

Answer 1

首先，是的，POST是此類調用的正確方法。

在您的情況下，您有兩種選擇：

整體發送數據
這樣端點實現將如下所示：

@RequestMapping(method=RequestMethod.POST, value="/login")
public void login(@RequestBody User user) { 
    System.out.println(user);
}

然后將其作為JSON發送

fetch('http://localhost:3002/login', {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    username: "foo",
    password: "bar"
  })
});

或以參數形式發送
這樣端點實現將如下所示：

@RequestMapping(method=RequestMethod.POST, value="/login")
public void login(@RequestParam("username") String username,
                  @RequestParam("password") String password) { 
    System.out.println(username + " " + password);
}

然后以參數形式發送（不是最佳實現）：

fetch('http://localhost:3002/login?username=' + username 
                                 + '&password=' + password, {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json"
  }
});

當然，您應該記住，簡單地發送密碼不是一個好主意，但我認為這是出於學習目的。 在其他情況下，您可以看看HTTPS。

您還可以查看其他登錄處理技術，例如初學者JWT，或者可以引入OAUTH。 祝好運！

編輯：

我沒有注意到您的模型類是錯誤的。 我相信您需要使它看起來像這樣：

class User {
    private String username;
    private String password;

    public User(String username, String password) {
        this.username = username;
        this.password = password;
    }

    public String getUsername() {
        return username;
    }

    public String getPassword() {
        return password;
    }
}

因此，Spring告訴您構造函數是錯誤的，因為他找不到username和password字段的正確映射。